vue3子组件怎么通知父组件的方法

在Vue 3中，子组件可以通过事件的方式通知父组件的方法。以下是两种实现方式：

1. 子组件注册事件，在需要调用父组件方法的地方，触发该注册事件即可调用父组件的方法。

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

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('custom-event') // 触发自定义事件
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component @custom-event="handleEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent() {
      // 处理事件的方法
    }
  }
}
</script>

2. 父组件传递一个处理方法给子组件，子组件调用这个处理方法并将父组件关心的值作为参数传递给它。

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

<script>
export default {
  methods: {
    notifyParent() {
      this.$props.onNotify('参数值') // 调用父组件传递的处理方法，并传递参数
    }
  },
  props: {
    onNotify: {
      type: Function,
      required: true
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component :on-notify="handleEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(value) {
      // 处理事件的方法，value为子组件传递的参数
    }
  }
}
</script>