Vue.cli 中怎樣使用自定義的組件

第一步：在 components 目錄新建你的組件文件（CounterCom.vue），script一定要export default {}

第二步：在需要用的頁(yè)面（組件）中導(dǎo)入：

import CounterCom from './components/CounterCom.vue'

第三步 ： 注 入 到 Vue 的子組件的 components 屬性上面,

components:{CounterCom}

第四步：在 template 視圖 view 中使用

<CounterCom ></CounterCom>

<counter-com></counter-com>

Vue 組件如何進(jìn)行傳值的

父組件向子組件傳遞數(shù)據(jù)

父組件內(nèi)設(shè)置要傳的數(shù)據(jù)，在父組件中引用的子組件上綁定一個(gè)自定義屬 性并把數(shù)據(jù)綁定在自定義屬性上，在子組件添加參數(shù) props 接收即可

子組件向父組件傳遞數(shù)據(jù)

子組件通過(guò) Vue 實(shí)例方法 $emit 進(jìn)行觸發(fā)并且可以攜帶參數(shù)，父組件監(jiān)聽(tīng)使 用@（v-on）進(jìn)行監(jiān)聽(tīng)，然后進(jìn)行方法處理

非父子組件之間傳遞數(shù)據(jù)

1、引入第三方 new Vue 定義為 eventBus

2、在組件中 created 中訂閱方法 eventBus.$on("自定義事件名",methods 中的方法名)

3、在另一個(gè)兄弟組件中的 methods 中寫(xiě)函數(shù)，在函數(shù)中發(fā)布 eventBus 訂 閱的方法 eventBus.$emit("自定義事件名”)

4、在組件的 template 中綁定事件(比如 click)

父?jìng)髯永?/h4>

使用props

父?jìng)鹘o子的數(shù)組是只讀的(做默認(rèn)值,讀取顯示)

不能進(jìn)行修改

App.vue文件中

<CounterCom :num="365"></CounterCom>

CounterCom.vue組件中

  //01接收參數(shù)并定義默認(rèn)值
props:{
    "num":{type:Number,default:1},
}
//02使用參數(shù)num
data() {
            //02 使用num:把傳過(guò)來(lái)的num賦值給counter
            return {
                counter: this.num
            }
        }

具體示例如下:

子傳父例子

使用的事件 $emit

CounterCom.vue組件中

<button class="active" @click="counter++;$emit('counterchange',counter)">
        {{counter}}
    </button>

App.vue

<counter-com @counterchange="n=$event"></counter-com>

$emit(事件名,事件值) 子組件主動(dòng)觸發(fā)一個(gè)事件,并傳遞一個(gè)位置,事件名(counterchange)和事件值(counter)是自定義的

$event固定寫(xiě)法,事件的值(counterchange事件的值,也是數(shù)組的第二個(gè)參數(shù))

Vue組件data為什么必須是函數(shù)

1、每個(gè)組件都是 Vue 的實(shí)例。

2、組件共享 data 屬性，當(dāng) data 的值是同一個(gè)引用類(lèi)型的值時(shí)，改變 其中一個(gè)會(huì)影響其他

3、組件中的 data 寫(xiě)成一個(gè)函數(shù)，數(shù)據(jù)以函數(shù)返回值形式定義，這樣每復(fù)用 一次組件，就會(huì)返回一份新的 data，類(lèi)似于給每個(gè)組件實(shí)例創(chuàng)建一個(gè)私 有的數(shù)據(jù)空間，讓各個(gè)組件實(shí)例維護(hù)各自的數(shù)據(jù)。而單純的寫(xiě)成對(duì)象形式， 就使得所有組件實(shí)例共用了一份 data，就會(huì)造成一個(gè)變了全都會(huì)變的結(jié) 果。

組件的命名規(guī)范

給組件命名有兩種方式

一種是使用鏈?zhǔn)矫?my-component

一種是使用大駝峰命名 MyComponent

在 字 符 串 模 板 中

<my-component></my-component>

和

<MyComponent></MyComponent>都可以使用， 在非字符串模板中最好使用<MyComponent></MyComponent>，因?yàn)橐裱?W3C 規(guī) 范中的自定義組件名 (字母全小寫(xiě)且必須包含一個(gè)連字符)，避免和當(dāng)前以及未 來(lái)的 HTML 元素相沖突

Vue 組件里的定時(shí)器要怎么銷(xiāo)毀

如果頁(yè)面上有很多定時(shí)器，可以在 data 選項(xiàng)中創(chuàng)建一個(gè)對(duì)象 timer， 每個(gè)定時(shí)器取個(gè)名字一一映射在對(duì)象 timer 中， 在 beforeDestroy 構(gòu)造函數(shù)中

for(let k in this.timer){clearInterval(k)}；

如果頁(yè)面只有單個(gè)定時(shí)器，可以這么做。

const timer = setInterval(() =>{}, 500);
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})

到此這篇關(guān)于VUE組件傳參超詳細(xì)講解的文章就介紹到這了,更多相關(guān)VUE組件傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論