vue3父组件向子组件传参的具体写法

在Vue 3中，父组件向子组件传参（也称作传递props）是一种非常基本的通信方式。下面我将详细解释如何在Vue 3中实现这一功能。

1. 定义子组件并接收props

首先，你需要在子组件中定义你想要接收的props。这通过在组件的props选项中完成。如果你使用<script setup>语法，则可以使用defineProps宏来定义。

使用<script>语法

<template>  
  <div>{{ message }}</div>  
</template>  
  
<script>  
export default {  
  props: {  
    message: String // 指定message是一个字符串类型的prop  
  }  
}  
</script>

使用<script setup>语法

<template>  
  <div>{{ message }}</div>  
</template>  
  
<script setup>  
const props = defineProps({  
  message: String // 指定message是一个字符串类型的prop  
})  
</script>

2. 父组件向子组件传递props

在父组件中，你需要在子组件标签上通过属性（attributes）的形式来传递数据，这些属性名需要与子组件中定义的props名相匹配。

<template>  
  <div>  
    <ChildComponent message="Hello from Parent" />  
  </div>  
</template>  
  
<script>  
// 引入子组件  
import ChildComponent from './ChildComponent.vue'  
  
export default {  
  components: {  
    ChildComponent  
  }  
}  
</script>

在这个例子中，父组件通过<ChildComponent message="Hello from Parent" />向子组件传递了一个名为message的prop，子组件通过defineProps宏接收这个prop，并将其显示在页面上。

注意事项

• 当传递props时，确保传递的数据类型与子组件中定义的props类型相匹配。
• 你可以在子组件中使用props.validation（对于<script>语法）或TypeScript（对于<script setup>语法）来增强props的类型检查和验证。
• 默认情况下，子组件不能修改通过props接收的数据。如果你需要修改数据，并且这些修改需要反映到父组件中，你应该考虑使用emit事件或Vuex/Vue 3的Composition API中的reactive/ref状态管理。