vue父子元件通訊

2021-09-22 03:34:50 字數 592 閱讀 6480

一、父元件利用props往子元件傳輸資料

父元件:

//注意傳遞引數時要用—代替駝峰命名,html不區分大小寫

子元件:

vue.component('child', ,

template: '}'

})

二、子元件向父元件傳遞引數利用事件機制

子元件通過this.$emit()派發事件,父元件利用v-on對事件進行監聽,實現引數的傳遞

子元件:

this.$emit('changecart',event.target)/*向父元件派發事件,同時傳遞引數event.target,後面的引數的個數不限*/
父元件:

三丶父元件呼叫子元件方法

在父元件中引用子元件並定義ref

呼叫定義在子元件中的方法show

this.$refs.selectfood.show();//同時也可以呼叫子元件中的屬性

Vue父子元件通訊

1.父與子通訊,通過屬性傳遞值,如下 lang zh cn charset utf 8 src js vue.js script title head id example p parent div type text x template id parenttpl 這是父元件h1 name zha...

Vue父子元件通訊

抓住幾個語義特點就可以了。子元件要接收父元件傳過來的內容,需要引入props,也就是說有props就是子元件 以下是子元件的內容 p div template export default script 父元件需要往子元件傳入引數,則某個部分要和引數post對應,即 v bind post post...

vue父子元件通訊

父元件 在父元件data 中定義需要傳送的資料 屬性名隨意 export default 子元件 在子元件export default 中定義需要傳送的資料,放在props裡面,data1 data2名字隨意,可不對應 export default data2 data 父元件向子元件傳值 這 da...