vue3组合式父传子

在Vue 3的组合式API中，父组件向子组件传递数据可以通过以下几种方式实现：

1. Props：可以在父组件中给子组件绑定属性。在子组件中，可以通过props选项接收父组件传递的数据。

// 父组件模板
<template>
  <child-component :message="msg"></child-component>
</template>

// 子组件模板
<template>
  <div>{{ message }}</div>
</template>

// 子组件脚本
<script>
export default {
  props: {
    message: String
  }
}
</script>

2. setup函数：在父组件中通过setup函数返回一个对象，子组件可以通过传递参数的方式获取父组件中的数据。

// 父组件模板
<template>
  <child-component :message="msg"></child-component>
</template>
// 父组件脚本
<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  setup() {
    const msg = ref('Hello World')
    return {
      msg
    }
  }
}
</script>

// 子组件模板
<template>
  <div>{{ message }}</div>
</template>

// 子组件脚本
<script>
export default {
  props: {
    message: String
  }
}
</script>

以上两种方式都可以实现父组件向子组件传递数据，具体使用哪种方式取决于具体的场景和需求。