如何在vue3 setup 中使用props向子组件传递数据

你可以在父组件的template中使用子组件并给它们添加需要传递的属性，然后在子组件中使用props来读取这些属性的值。在vue3 setup中，你可以通过使用ref函数来定义props和对其进行赋值，然后在模板中使用组件并将props属性传递给它们。例如：

在父组件中：

<template>
  <child-component :message="msg" />
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  setup() {
    const msg = ref('Hello, child component!')

    return {
      msg
    }
  }
}
</script>

在子组件中：

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

<script>
import { defineProps } from 'vue'

export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    defineProps({
      message: props.message
    })
  }
}
</script>

这样，在父组件中的msg变量的值就可以通过props的形式传递到子组件中，并在子组件中使用。