vue3 emit 用法

在Vue 3中，使用`emit`可以实现子组件向父组件传值。下面是使用``的步骤：

1. 在子件中定义`emits`属性，用于父组件传递的事件名称。可以是一个数组或对象形式。
2. 在子组件的`setup`函数中，使用`ctx.emit`来触发事件，并传递需要传递给父组件的数据作为参数。
3. 在父组件中定义与子组件中`emits`属性中相同名称的方法，用于接收子组件传递的数据。

下面是一个示例代码，演示了Vue 3中使用`emit`的用法：

<template>
  <div>
    <child-component @haha="handleHaha"></child-component>
    <p>Received data: {{ receivedData }}</p>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent,
  },
  setup() {
    const receivedData = ref('');

    const handleHaha = (data) => {
      receivedData.value = data;
    };

    return {
      receivedData,
      handleHaha,
    };
  },
});
</script>

<template>
  <div>
    <p>hello world</p>
    <button @click="go" class="btn btn-success">go</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  emits: ['haha'],
  setup(_, context) {
    const go = () => {
      context.emit('haha', 'Hello from child component');
    };

    return {
      go,
    };
  },
});
</script>

<style>
</style>

在上面的示例中，父组件通过`@haha`监听子组件触发的`haha`事件，并将子组件传递的数据保存在`receivedData`变量中。子组件中的`go`方法通过`context.emit`触发`haha`事件，并传递了字符串数据"Hello from child component"。