vue3 setup父传子

在Vue 3中，可以使用`props`来实现父组件向子组件传递数据。以下是一种常见的做法：

1. 在子组件中定义`props`属性，指定要接收的数据类型。例如，在子组件中的`setup`函数中使用`defineProps`来定义`props`：

import { defineProps } from 'vue';

export default {
  setup() {
    const props = defineProps({
      message: String, // 假设要传递一个字符串类型的message属性
    });

    // 在此处使用props.message即可访问父组件传递的数据

    return {
      // ...
    };
  },
};

2. 在父组件中使用子组件，并通过标签属性的方式将数据传递给子组件。例如：

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from parent component',
    };
  },
};
</script>

在这个例子中，父组件通过`:message="parentMessage"`将`parentMessage`的值传递给了子组件的`message`属性。

这样，子组件就可以在`props`中访问到父组件传递的数据了。需要注意的是，父组件传递的数据是只读的，如果需要在子组件中修改父组件的数据，可以通过触发事件来实现。