在 Vue 中，组件之间的通信可以通过父子组件之间传递 props 和子组件向父组件派发事件来实现。
- 父组件向子组件传递 (
props)
<div id="app">
<child message="hello!"></child>
</div>
<script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
把 message 这个属性通过 props 传递给了子组件 child, 在子组件中声明 props，接收传递过来的数据
注意: 子组件接收到的 props 是只读的，不能直接修改。如果需要修改这些属性，应该通过事件的方式向父组件发送消息，让父组件去修改数据。
- 子组件通过
$emit方法来派发事件，并通过$on方法在父组件中监听事件。
具体来说，子组件可以通过$emit 方法来传递自定义事件，如下所示：
// 子组件
Vue.component('child-component', {
template: '<button @click="onClick">Click me</button>',
methods: {
onClick() {
this.$emit('custom-event', 'hello, parent');
}
}
});
在父组件中，可以通过v-on 或 @ 指令来监听子组件传递的事件，并在方法中处理事件数据，如下所示：
<!-- 父组件 -->
<child-component @custom-event="handleEvent"></child-component>
<script>
export default {
methods: {
handleEvent(data) {
console.log(data); // 输出：hello, parent
}
}
}
</script>
需要注意的是，子组件通过 $emit 方法派发的事件只能被父组件捕获，而不能被其他祖先组件或兄弟组件捕获。如果需要在多个组件之间进行通信，可以考虑使用 Vuex 或事件总线等机制。
