前言：
在组件化开发中，需要将页面抽离成组件的形式，抽离之后就涉及到了组件中数据传递，可分为：父传子（props）、子传父（emits）、祖孙通信（provide和inject）、兄弟通信、全局通讯（pinia）。这次我就以博客的形式复习一下前三种通讯，想了解pinia可点击看我前面写的博客。
1.父传子
首先需要在父组件中的子组件标签中添加自定义属性，将需要传递的值放如自定义属性中，在子组件中通过defineProps这个方法获取父组件传递过来的值。具体方法如下：
father.vue:
<template>
<div class="father">
<h2>父组件</h2>
<!-- 使用自定义属性传统数据 -->
<Child :text="text" :sayHello="sayHello"></Child>
</div>
</template>
<script setup>
import { ref } from 'vue';
import Child from './Child.vue';
// state
const text = ref('我是父组件中的数据')
// function
function sayHello() {
console.log('hello');
}
</script>Chlid.vue:
<template>
<div class="child">
<div>子组件:{{ text }}</div>
<div>子内容</div>
</div>
</template>
<script setup>
// 接收父组件传递来的数据
const props = defineProps({
text: String,
sayHello: Function
})
// 判断方法是否传递过来，是则执行方法
if (props.sayHello) {
props.sayHello()
}
</script>从上可以看出，不只有数据可以传递，方法也是可以传递给子组件的。子组件在接收时，需要给数据标注类型。
2.子传父
1.defineExpose+ref
使用defineExpose+ref的方式将子组件中的数据传递给父组件，首先在子组件中定义数据，使用defineExpose方法将数据暴露出去，在父组件中通过ref来接收。
chlid.vue:
<template>
<div class="child">
<div>子组件</div>
<div>子内容</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
// state
const childText = ref('我是子组件中的数据')
// function
function sayHelloFather() {
console.log('hello father');
}
// 将子组件中的数据暴露出去
defineExpose({
childText,
sayHelloFather
})
</script>father:
<template>
<div class="father">
<h2>父组件</h2>
<!-- 使用自定义属性传统数据 -->
<Child ref="childRef"></Child>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import Child from './Child.vue';
// 接收子组件中传递的数据
const childRef = ref({
childText: String,
sayHelloFather: Function
})
// 打印数据
onMounted(() => {
console.log('childText:', childRef.value?.childText);
childRef.value?.sayHelloFather()
})
</script>2.v-model
知道了如何将子组件中的数据如何传递给父组件，那如何在子组件中修改父组件中的数据呢，使用到了v-model + defineEmits的方法，首先在父组件中定义一个数据，在其子组件标签上添加v-model:名称 = '定义的数据名称'，在子组件中通过defineProps接收传递过来的数据，然后使用defineEmits通知父组件去修改数据，这边我写了一个小例子，代码如下：
father.vue:
<template>
<div class="father">
<h2>父组件</h2>
<div>{{ content }}</div>
<Child v-model:content="content"></Child>
</div>
</template>
<script setup>
import { ref } from 'vue';
import Child from './Child.vue';
const content = ref('content')
</script>chlid.vue:
<template>
<div class="child">
<div>子组件</div>
<input type="text" :value="prop.content" @input="handleInput">
</div>
</template>
<script setup>
// 接收父组件传递过来的数据
const props = defineProps({
content: String
})
const emits = defineEmits(['update:content'])
function handleInput(e) {
const target = e.target.value
// 通知父组件修改数据
emits('update:content', target)
}
</script>这里例子的意思是，我修改表单的数据时，父组件中对应的数据也会跟着修改，这里有一点需要注意，在通知父组件修改数据的参数，第一个参数是update:content，需要加上update，content需要跟父组件中的子组件标签上的v-model:content中content对应。
在实际开发中父传子和子传父是使用频率最高的。
3.祖孙通信
当需要进行跨组件通信时可以使用到provide和inject（依赖注入）。
具体使用：在祖先组件中通过provide配置向后代组件提供数据。在后代组件中通过inject配置来声明接收数据。
app.vue:
<template>
<div class="app">
<Father></Father>
</div>
</template>
<script setup>
import { provide, ref } from 'vue';
import Father from './components/Father.vue';
// state
const grandFatherData = ref('我是App.vue中的数据，也就是你爷爷辈')
// function
function sayHello() {
console.log('hello');
}
provide('appData', { grandFatherData, sayHello })
</script>chlid.vue:
<template>
<div class="child">
<div>子组件</div>
<div>app.vue传来的数据：{{ data.grandFatherData }}</div>
</div>
</template>
<script setup>
import { inject, onMounted } from 'vue';
const data = inject('appData')
onMounted(()=>{
data.sayHello()
})
</script>这样我们就可以获取到祖先组件传来的数据了
结语：
组件通信是Vue开发中的核心技能，掌握多种通信方式可以灵活应对不同场景的需求。从简单的父子通信到复杂的跨层级通信，合理选择方法能让代码更清晰、维护更方便。