props $emit

在 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 或事件总线等机制。