Vue3 props和emit的用法

在Vue3中，props和emit仍然是非常重要的概念。它们被用于父子组件之间的数据通信和事件传递。

首先，让我们看看props。在Vue3中，props可以在组件声明中的setup函数中使用。你可以使用ref、reactive或者其他响应式对象来接收props。例如：

import { defineComponent, ref } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const messageRef = ref(props.message);

    return {
      messageRef,
    };
  },
});

在上面的例子中，我们定义了一个message的props，并且使用ref来接收它。接着，在组件中我们可以直接使用messageRef来使用这个props。

接下来，让我们看看emit。emit用于从子组件向父组件派发事件。在Vue3中，你可以使用Vue的内置函数createApp来创建一个实例，然后使用$emit函数来派发事件。例如：

import { defineComponent, createApp } from 'vue';

export default defineComponent({
  setup() {
    const handleClick = () => {
      createApp().config.globalProperties.$emit('my-event', 'some data');
    };

    return {
      handleClick,
    };
  },
});

在上面的例子中，我们定义了一个handleClick函数，并且使用$emit来派发一个名为my-event的事件，并且传递了一些数据。

在父组件中，你可以使用v-on监听这个事件，并且执行一些操作。例如：

<template>
  <child-component @my-event="handleEvent"></child-component>
</template>

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

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

在上面的例子中，我们使用v-on监听名为my-event的事件，并且在handleEvent函数中打印了传递过来的数据。