vue元件通訊

這部分vue文件已經說的很清楚了，但是為了更好的理解，自己再整理一遍。

首先，父元件的與子元件的通訊是通過子元件的props。

那麼子元件有資料變化時，想要通知父元件應該怎麼辦呢？

父元件可以在使用子元件的地方直接用 v-on 來監聽子元件觸發的事件。

簡單來說，就是子元件監聽的事件，在函式內使用 $emit(eventname, optionalpayload) 觸發事件，在父元件使用v-on監聽emit的觸發事件。

**如下：

//父元件

}v-on:increment="incrementtotal">//子元件
v-on:increment="incrementtotal">//子元件

vue.component('button-counter', }',

data: function () 
},methods: 
},})new vue(,
methods: 
}})

1.使用乙個空的 vue 例項作為事件匯流排

var parent = new vue()

// 訪問子元件例項
var child = parent.$refs.profile

var bus = new vue()

2.觸發元件 a 中的事件

bus.$emit('id-selected', 1)

3.在元件 b 建立的鉤子中監聽事件

bus.$on('id-selected', function (id) )

三、js操作元件

在js中直接訪問子元件，可以使用 ref 為子元件指定乙個引用 id：

//ref為子元件指定id

var parent = new vue()

// 訪問子元件例項
var child = parent.$refs.profile

$refs 只在元件渲染完成後才填充，並且它是非響應式的。它僅僅是乙個直接操作子元件的應急方案——應當避免在模板或計算屬性中使用 $refs。

Vue 元件通訊

單層元件通訊 prop 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件 的資料。父元件的資料需要通過 prop 才能下發到子元件中。子元件要顯式地用 props 選項宣告它預期的資料 vue.component child 然後給他傳乙個訊息 message hel...

Vue元件通訊

父子級通訊推薦使用 props emit parent children refs attrs listeners 子元件使用props 接收父元件傳遞的值 父元件向子元件傳值 子元件通過 emit 讓父元件接收事件，改變父元件的data裡面的值 子元件向父元件傳值 父元件 子元件 這裡的props...

Vue 元件通訊

一 父子元件間 自定義事件 子元件用 emit 來觸發事件，父元件用 on來監聽子元件的事件。父元件 父元件函式 handlegettotal function total 子元件 1 子元件函式 handleincrease function 二 父子元件間 使用v model 在自定義元件上使用...