目录
一.性质
1.实现组件的复用性
2.实现组件的数据流
3.实现组件的状态管理
4.实现组件的交互
二.使用
1.父组件
2.子组件
三.代码
1.父组件代码
2.子组件代码
四.效果
一.性质
Vue3 中 props 是组件的一个重要特性，用于父组件向子组件传递数据。props 可以定义组件接收的属性，子组件可以通过 props 属性来接收父组件传递的数据，并在组件内部进行使用。props 的作用主要有以下几点：
1.实现组件的复用性
通过 props 可以将不同的属性传递给同一个组件，实现组件的复用。
2.实现组件的数据流
props 可以实现父组件向子组件的数据传递，形成数据流。
3.实现组件的状态管理
props 可以将父组件的状态传递给子组件，实现子组件的状态管理。
4.实现组件的交互
props 可以将父组件的交互事件传递给子组件，实现组件的交互。
二.使用
1.父组件
2.子组件
三.代码
1.父组件代码
<template><div class="grandpa"><h4>父组件</h4><h4>父亲的汽车：{{ car }}</h4><h4>儿子的玩具：{{ toy }}</h4><father :car="car" :getToy="getToy"/></div>
</template><script setup lang="ts" name="grandpa">
import father from '../components/father.vue'import { ref } from "vue";// 数据const car = ref('宝马')const toy = ref()// 方法function getToy(value:string){toy.value = value}</script><style >
.grandpa {background-color: orange;
}</style>2.子组件代码
<template><div class="father"><h4>子组件</h4><h4>儿子的玩具：{{ toy }}</h4><h4>父亲的汽车：{{ car }}</h4><button @click="getToy(toy)">玩具给父亲</button></div><son v-bind="$attrs"/></template><script setup lang="ts" name="father">import { ref } from "vue";const toy = ref('变形金刚')defineProps(['car','getToy'])</script><style>
.father{background-color: skyblue;
}h4{margin-left: 20px;font-size: 20px;
}
button{width: 120px;height: 40px;font-size: 20px;margin-left: 20px;
}</style>
四.效果
