在 Vue 中筑公，組件之間的通信可以通過(guò)父子組件之間傳遞 props 和子組件向父組件派發(fā)事件來(lái)實(shí)現(xiàn)路操。
- 父組件向子組件傳遞 (
props)
<div id="app">
<child message="hello!"></child>
</div>
<script>
// 注冊(cè)
Vue.component('child', {
// 聲明 props
props: ['message'],
template: '<span>{{ message }}</span>'
})
// 創(chuàng)建根實(shí)例
new Vue({
el: '#app'
})
</script>
把 message 這個(gè)屬性通過(guò) props 傳遞給了子組件 child, 在子組件中聲明 props杀迹，接收傳遞過(guò)來(lái)的數(shù)據(jù)
注意: 子組件接收到的 props 是只讀的响委，不能直接修改褥紫。如果需要修改這些屬性崭别，應(yīng)該通過(guò)事件的方式向父組件發(fā)送消息冬筒，讓父組件去修改數(shù)據(jù)。
- 子組件通過(guò)
$emit方法來(lái)派發(fā)事件紊遵，并通過(guò)$on方法在父組件中監(jiān)聽事件账千。
具體來(lái)說(shuō)，子組件可以通過(guò)$emit 方法來(lái)傳遞自定義事件暗膜，如下所示：
// 子組件
Vue.component('child-component', {
template: '<button @click="onClick">Click me</button>',
methods: {
onClick() {
this.$emit('custom-event', 'hello, parent');
}
}
});
在父組件中匀奏，可以通過(guò)v-on 或 @ 指令來(lái)監(jiān)聽子組件傳遞的事件，并在方法中處理事件數(shù)據(jù)学搜，如下所示：
<!-- 父組件 -->
<child-component @custom-event="handleEvent"></child-component>
<script>
export default {
methods: {
handleEvent(data) {
console.log(data); // 輸出：hello, parent
}
}
}
</script>
需要注意的是娃善，子組件通過(guò) $emit 方法派發(fā)的事件只能被父組件捕獲，而不能被其他祖先組件或兄弟組件捕獲瑞佩。如果需要在多個(gè)組件之間進(jìn)行通信聚磺，可以考慮使用 Vuex 或事件總線等機(jī)制。
