元件關係分為父子元件通訊、兄弟元件通訊和跨級元件通訊
使用 v-on 除了監聽 dom 事件外，還可以用於元件之間的自定義事件
js 的設計模式–觀察者模式，有dispatchevent 和 addeventlistener 兩個方法，vue 元件也有與之類似的一套模式，子元件用$emit來觸發事件，父元件用$on()來監聽子元件事件。
步驟：自定義事件；
在子元件用$emit觸發事件，第乙個引數是事件名，後面的引數是要傳遞的資料；
在自定義事件中用乙個引數來接收
// 自定義 change 事件
data: ,
methods:
},components:
},methods: ,
cut: function()
}}})
v-model 其實是乙個語法糖，其在背後做了兩件事：
用 v-bind 繫結乙個 value 屬性
用 v-on 指令給當前元素繫結乙個 input 事件
使用 v-model 時，v-model 做的是
接收乙個 value 屬性
當有新的 value 時觸發 input 事件
data: ,
components:
},template: '+1',
methods:
} }
} })
this.$emit這行**其實就是觸發了 input 事件，而 input 事件後面的引數就是傳遞給 v-model 繫結的 value 屬性的值。
v-model 其實就做到了繫結事件加上接收事件觸發傳遞過來的引數資料。
我們有時候也需要非父子關係元件之間的通訊，簡單場景下可以使用乙個空的 vue 例項作為**事件匯流排：
var bus = new vue()bus.$on('msg', function(msg) )bus.$emit('msg', "這是來自傳送元件的訊息")---------------------------
| 根元件 |
| ----------- |
| | 子元件 a | |
| ----------- |
| |
| ----------- |
| | 子元件 b | |
| ----------- |
| |
---------------------------
vue.component('a-component',
}})vue.component('b-component', )
}})data:
})可以通過this.$parent.***來修改父元件的指定內容
這是父元件的 msg：}
vue.component('child-component',
}})data:
})為子元件新增特殊屬性 ref 作為索引
通過this.$refs.索引.***來獲取指定子元件的內容
// 新增索引
獲取子元件 a 的 msg
父元件當前的 msg：}
vue.component('a-component',
}})vue.component('b-component',
}})data: ,
methods:
}})
Vue 元件通訊
單層元件通訊 prop 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件 的資料。父元件的資料需要通過 prop 才能下發到子元件中。子元件要顯式地用 props 選項宣告它預期的資料 vue.component child 然後給他傳乙個訊息 message hel...
vue元件通訊
這部分vue文件已經說的很清楚了，但是為了更好的理解，自己再整理一遍。首先，父元件的與子元件的通訊是通過子元件的props。那麼子元件有資料變化時，想要通知父元件應該怎麼辦呢？父元件可以在使用子元件的地方直接用 v on 來監聽子元件觸發的事件。簡單來說，就是子元件監聽的事件，在函式內使用 emit...
Vue元件通訊
父子級通訊推薦使用 props emit parent children refs attrs listeners 子元件使用props 接收父元件傳遞的值 父元件向子元件傳值 子元件通過 emit 讓父元件接收事件，改變父元件的data裡面的值 子元件向父元件傳值 父元件 子元件 這裡的props...