vue3 props传值 sutup语法糖

在Vue 3中，我们可以使用`setup`语法糖来定义组件的props属性以及传递值。`setup`函数是一个用于设置组件的执行环境的函数，它会在组件初始化时被调用。

下面是一个示例代码，演示如何使用`setup`语法糖来定义props属性和传递值：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

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

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

在上面的代码中，我们首先通过`import { ref } from 'vue'`导入了`ref`函数。然后，在`setup`函数中，我们通过`props`参数获取到传递给组件的props值。在这个例子中，我们定义了一个名为`initialMessage`的props，并将其类型设置为String，并且标记为必需的。

接下来，我们使用`ref`函数将`props.initialMessage`的值包装成一个响应式引用（reactive reference），并将其赋值给名为`message`的变量。最后，我们从`setup`函数中返回一个对象，将`message`作为返回对象的属性。这样，在模板中就可以通过`{{ message }}`来访问和渲染这个值了。

需要注意的是，使用`setup`语法糖定义props时，我们不再需要在组件选项中显式地声明props。而是直接在`setup`函数中使用`props`参数来访问和处理props的值。

希望这个例子能够帮助到你理解Vue 3中使用`setup`语法糖来传递props值的方式。如果还有其他问题，请随时提问。