vue3父传子自定义事件

在Vue3中，父组件可以通过v-bind指令将一个自定义事件绑定到子组件上，子组件可以通过$emit方法触发这个自定义事件并向父组件传递数据。具体实现方式如下：

1. 在父组件中定义一个方法，用于处理子组件触发的自定义事件并接收子组件传递的数据。

2. 在父组件中使用v-bind指令将自定义事件绑定到子组件上，并将定义的方法作为事件处理函数传递给子组件。

3. 在子组件中通过$emit方法触发自定义事件，并将需要传递给父组件的数据作为参数传递给$emit方法。

范例：<<引用: 文章结构 理论基础实际操作父传子自定义函数子组件调用自定义函数方式1方式2方法3 引用数据类型超出的一个现象 。>>

父组件代码：

<template>
  <div>
    <Child @custom-event="handleCustomEvent"></Child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  methods: {
    handleCustomEvent(data) {
      console.log(data);
    }
  }
}
</script>

子组件代码：

<template>
  <div>
    <button @click="emitCustomEvent">触发自定义事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event', '这是子组件传递给父组件的数据');
    }
  }
}
</script>