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

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

第二步：在需要用的頁面（組件）中導入：

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

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

components:{CounterCom}

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

<CounterCom ></CounterCom>

<counter-com></counter-com>

Vue 組件如何進行傳值的

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

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

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

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

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

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

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

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

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

父傳子例子

使用props

父傳給子的數(shù)組是只讀的(做默認值,讀取顯示)

不能進行修改

App.vue文件中

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

CounterCom.vue組件中

  //01接收參數(shù)并定義默認值
props:{
    "num":{type:Number,default:1},
}
//02使用參數(shù)num
data() {
            //02 使用num:把傳過來的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(事件名,事件值) 子組件主動觸發(fā)一個事件,并傳遞一個位置,事件名(counterchange)和事件值(counter)是自定義的

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

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

1、每個組件都是 Vue 的實例。

2、組件共享 data 屬性，當 data 的值是同一個引用類型的值時，改變 其中一個會影響其他

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

組件的命名規(guī)范

給組件命名有兩種方式

一種是使用鏈式命名 my-component

一種是使用大駝峰命名 MyComponent

在 字 符 串 模 板 中

<my-component></my-component>

和

<MyComponent></MyComponent>都可以使用， 在非字符串模板中最好使用<MyComponent></MyComponent>，因為要遵循 W3C 規(guī) 范中的自定義組件名 (字母全小寫且必須包含一個連字符)，避免和當前以及未 來的 HTML 元素相沖突

Vue 組件里的定時器要怎么銷毀

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

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

如果頁面只有單個定時器，可以這么做。

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

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

最新評論