vue3Setup父子组件emit举例

假设有一个父组件Parent和一个子组件Child，需要在Child组件中触发一个事件，并在Parent组件中监听该事件。

在Child组件中使用emit方法触发事件：

import { defineComponent } from 'vue'

export default defineComponent({
  methods: {
    handleClick() {
      this.$emit('childEvent', 'Child Component Emit')
    }
  }
})

上面的代码中，我们在Child组件中定义了一个handleClick方法，该方法通过$emit方法触发名为'childEvent'的事件，并传递了一个字符串参数'Child Component Emit'。

在Parent组件中监听Child组件触发的事件：

import { defineComponent } from 'vue'

export default defineComponent({
  methods: {
    handleChildEvent(msg) {
      console.log(msg)
    }
  },
  template: `
    <div>
      <Child @childEvent="handleChildEvent"></Child>
    </div>
  `
})

上面的代码中，我们在Parent组件中定义了一个handleChildEvent方法，该方法接收一个字符串参数msg，并在控制台输出该字符串。

在Parent组件中的模板中，我们使用标签引入Child组件，并在该标签的@childEvent属性中绑定了handleChildEvent方法，表示监听Child组件触发的'childEvent'事件。

这样，在Child组件中触发'childEvent'事件时，就会调用Parent组件中的handleChildEvent方法，并将传递的参数打印在控制台上。