vue 父组件与子组件事件通讯

在 Vue 中，父组件和子组件之间可以通过事件通信。

父组件向子组件传递数据，可以通过 props 属性实现。而子组件向父组件传递数据，则可以通过事件的方式实现。

具体实现方法如下：

1. 父组件向子组件传递数据

在父组件中，通过 props 属性将数据传递给子组件：

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        message: 'Hello world!'
      }
    }
  }
</script>

在子组件中，接收父组件传递的数据：

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String,
        default: ''
      }
    }
  }
</script>

2. 子组件向父组件传递数据

在子组件中，通过 $emit() 方法触发事件，将数据传递给父组件：

<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('send-message', 'Hello world!')
      }
    }
  }
</script>

在父组件中，通过 v-on 指令监听子组件触发的事件，并在事件处理函数中获取子组件传递的数据：

<template>
  <div>
    <child-component @send-message="handleMessage"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    components: {
      ChildComponent
    },
    methods: {
      handleMessage(message) {
        console.log(message) // 输出：Hello world!
      }
    }
  }
</script>

以上就是 Vue 中父组件和子组件之间通过事件通信的方法。