vue3 Emits setup

在Vue 3中，可以使用`setup`函数来定义组件的逻辑和响应式数据。`setup`函数接收两个参数：`props`和`context`。其中，`props`是一个响应式对象，用于接收父组件传递的属性值；`context`是一个包含了一些实用方法和属性的对象，其中包括`emit`方法，用于触发自定义事件。

下面是一个使用`setup`函数实现父子组件间传参的示例：

在父组件中（Father.vue），通过`v-bind`将数据传递给子组件：

<template>
  <Son :message="message" />
</template>

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

export default {
  components: {
    Son
  },
  data() {
    return {
      message: 'Hello from parent!'
    };
  }
};
</script>

在子组件中（Son.vue），使用`defineProps`来接收父组件传递的属性值，并使用`defineEmits`来定义自定义事件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import { defineProps, defineEmits } from 'vue';

export default {
  props: {
    message: String
  },
  setup(props, context) {
    const sendMessage = () => {
      context.emit('custom-event', 'Hello from child!');
    };

    return {
      sendMessage
    };
  }
};
</script>

在上述示例中，父组件通过`v-bind`将`message`属性的值传递给子组件。子组件使用`defineProps`来接收父组件传递的属性值，并使用`defineEmits`来定义自定义事件。当点击按钮时，子组件通过`context.emit`方法触发自定义事件，并传递消息给父组件。