Vue:子組件如何跟父組件通信
阿新 • • 發佈:2018-04-15
dev table noop div listener developer tle number lin 使用
我們知道,父組件使用 prop 傳遞數據給子組件。但子組件怎麽跟父組件通信呢?這個時候 Vue 的自定義事件系統就派得上用場了。
使用 v-on
綁定自定義事件
每個 Vue 實例都實現了事件接口,即:
- 使用
$on(eventName)
監聽事件 - 使用
$emit(eventName, optionalPayload)
觸發事件
Vue 的事件系統與瀏覽器的 EventTarget API 有所不同。盡管它們運行起來類似,但是 $on
和 $emit
並不是addEventListener
和 dispatchEvent
的別名。
另外,父組件可以在使用子組件的地方直接用 v-on
來監聽子組件觸發的事件。
不能用 $on
監聽子組件釋放的事件,而必須在模板裏直接用 v-on
綁定,參見下面的例子。
下面是一個例子:
<div id="counter-event-example">
|
Vue.component(‘button-counter‘, {
|
0
Vue:子組件如何跟父組件通信