vue3中父向子组件传值

在Vue3中，父组件向子组件传值有多种方法。其中一种方法是使用`defineProps`，在父组件中定义props属性，然后将需要传递给子组件的值作为props的属性值。在子组件中，可以使用`props`接收父组件传递的值。

具体实现步骤如下：
1. 在父组件中使用`defineProps`定义props属性，并将需要传递给子组件的值作为props的属性值。
2. 在子组件中使用`props`接收父组件传递的值。

下面是一个示例代码，展示了如何在Vue3中实现父向子组件传值：

// 父组件 Father.vue
<template>
  <div class="fa">
    <div style="margin: 10px;">我是父组件</div>
    父组件接收子组件传的值：{{ sonMessage }}
    <Son :message="sonMessage"></Son>
  </div>
</template>

<script setup lang="ts">
import Son from './Son.vue'
import { ref } from "vue";

const sonMessage = ref<string>("");

</script>

<style scoped>
.fa {
  border: 3px solid cornflowerblue;
  width: 400px;
  text-align: center;
}
</style>

// 子组件 Son.vue
<template>
  <div class="son">
    <div style="margin: 10px;">我是子组件</div>
    子组件接收父组件传的值：{{ message }}
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

const props = defineProps({
  message: String, // 定义props属性，接收父组件传递的值
});

</script>

<style scoped>
.son {
  border: 3px solid lightgreen;
  width: 200px;
  text-align: center;
}
</style>

在父组件中，使用`:message="sonMessage"`将`sonMessage`的值传递给子组件的`message` props属性。在子组件中，使用`props`接收父组件传递的值，并在模板中展示。

这样，就实现了在Vue3中父组件向子组件传递值的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Vue3父子组件间传参通信](https://blog.csdn.net/qq_45397526/article/details/126281133)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue3 父组件和子组件如何传值 详解](https://blog.csdn.net/qq_56263094/article/details/124576055)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]