目录

一.性质

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>

四.效果