vue3子组件通知父组建

在 Vue.js 3 中，子组件可以通过事件向父组件发送通知。下面是一种常见的方法：

1. 在子组件中，使用 `this.$emit()` 方法触发一个自定义事件，并传递需要的数据。例如：

<template>
  <button @click="notifyParent">通知父组件</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('custom-event', { message: 'Hello from child component' });
    }
  }
}
</script>

2. 在父组件中，使用 `v-on` 指令监听子组件触发的自定义事件，并在事件处理函数中获取传递的数据。例如：

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
    <p>父组件接收到的消息：{{ receivedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedMessage: ''
    }
  },
  methods: {
    handleCustomEvent(data) {
      this.receivedMessage = data.message;
    }
  }
}
</script>

这样，每当子组件中的按钮被点击时，就会向父组件发送一个自定义事件，并传递消息数据。父组件接收到事件后，会更新 `receivedMessage` 数据并在模板中显示出来。