Vue3：props实现组件通信

目录

一.性质

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>

四.效果