Vue.js的組件化思想 —下
阿新 • • 發佈：2018-04-17
通信 emp 模板 直接 應該 clas 不能 總結 並且
一、組件間的通信
組件實例的作用域是孤立的；這意味著不能並且不應該在子組件的模板內直接引用父組件的數據。但是父子組件之間需要通信：父組件要給子組件傳遞數據，子組件需要將它內部發生的事情告知給父組件。
在 Vue.js 中，父子組件的關系可以總結為 props down, events up 。父組件通過 props 向下傳遞數據給子組件，子組件通過 events 給父組件發送消息。如下圖所示：
二、 Prop — 父組件傳遞數據給子組件
prop 是父組件用來傳遞數據的一個自定義屬性。子組件需要顯式地用 props 選項聲明 “prop”：
Vue.component(‘child‘, {
// 聲明 props
props: [‘message‘],
// 就像 data 一樣，prop 可以用在模板內
// 同樣也可以在 vm 實例中像 “this.message” 這樣使用
template: ‘<span>{{ message }}</span>‘
})
2.1 簡單的傳值
Vue.js的組件化思想 —下