vue3子组件通知父组件更新

在Vue3中，子组件通知父组件更新的方法与Vue2中基本相同。子组件可以通过 `$emit` 方法向父组件传递一个参数，父组件通过 `@eventName` 监听子组件传递过来的参数，然后在对应的方法中接收到传递过来的值。具体实现方法如下：

子组件：

<template>
  <div>
    <button @click="sendValueToParent">向父组件传值</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendValueToParent() {
      // 这里可以传递一个值给父组件
      this.$emit('update:value', 'Hello World!')
    }
  }
}
</script>

父组件：

<template>
  <div>
    <ChildComponent @update:value="handleChildValue" />
    <p>子组件传递过来的值为：{{ value }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      value: ''
    }
  },
  methods: {
    handleChildValue(value) {
      // 这里可以接收到子组件传递过来的值
      this.value = value
    }
  }
}
</script>

在上面的代码中，子组件通过 `$emit` 方法向父组件传递了一个名为 `update:value` 的事件，并传递了一个值为 `'Hello World!'` 的参数。父组件通过 `@update:value` 监听子组件传递过来的事件，并在 `handleChildValue` 方法中接收到传递过来的值，并将其赋值给 `value` 数据。最终，父组件中的 `p` 标签会显示子组件传递过来的值。