vue3 setup props

在Vue 3中，可以通过`setup`函数来接收和使用props。`setup`函数是组合式API的一部分，它用于设置组件的逻辑，并且在组件实例创建之前执行。

在`setup`函数中，通过参数的形式来接收props。这个参数可以是一个对象，也可以是一个响应式引用。

以下是两种常见的在`setup`函数中接收props的方式：

1. 使用对象参数接收props：

import { defineComponent } from 'vue';

const ChildComponent = defineComponent({
  props: {
    message: {
      type: String,
      default: 'Hello Vue 3!'
    }
  },
  setup(props) {
    console.log(props.message); // 访问props.message
    // ...
  }
});

在上述代码中，我们使用`defineComponent`函数创建了一个组件，并在`props`选项中定义了props。在`setup`函数中，我们通过`props`参数来访问父组件传递的props。

2. 使用响应式引用接收props：

import { defineComponent, ref } from 'vue';

const ChildComponent = defineComponent({
  props: {
    message: {
      type: String,
      default: 'Hello Vue 3!'
    }
  },
  setup(props) {
    const messageRef = ref(props.message); // 创建一个响应式引用

    console.log(messageRef.value); // 访问props.message

    // 监听props变化
    watchEffect(() => {
      messageRef.value = props.message;
    });

    // ...
  }
});

在上述代码中，我们使用`ref`函数创建了一个响应式引用`messageRef`，并将`p