Vue3 Setup: 父子组件 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 方法，并将传递的参数打印在控制台上。