组件：对数据和方法的简单封装。在Vue开发中组件是非常重要的一环，使用组件化开发，会大大的提高代码的简洁性，使项目更以维护与开发。
组件一般分为两种：纯组件、与功能性组件。（博主自己看法，欢迎指正交流）
纯组件：一般用于纯页面展示，不需要开发者关心内部发生的事情，只需要传参调用，就可以实现对应的展示与功能。
功能性组件：多页面使用，多层组件嵌套，内部根据不同参数有不同的处理逻辑，需要与父组件配合使用，需要在子组件触发父组件的事件。
一、组件通信（以Vue3为例）
1.props父=>子通信
父组件：
<template>
<div>
<h1>我是父组件：我拥有的值是{
{ count }}</h1>
<button @click="changCount">更改父组件值</button>
<div>
<Son :count="count"></Son>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import Son from "./components/son.vue";
const count = ref(0);
function changCount() {
count.value++;
}
</script>
<style>
</style>子组件：
<template>
<div>
<h2>我是子组件：我接收到的值是{
{ count }}</h2>
</div>
</template>
<script setup>
defineProps(["count"]);
</script>
<style>
</style>进一步解析传参的用处：
①通过计算属性对父组件传递过来的数据进行进一步转化
<template>
<div>
<h2>我是子组件：我接收到的值是{
{ sonCount }}</h2>
</div>
</template>
<script setup>
import { computed } from "vue";
const props = defineProps(["count"]);
//基于父组件传递过来的数据进行进一步处理进行展示
const sonCount = computed(() => {
return props.count * 10;
});
</script>
<style>
</style>②通过监听器基于父组件传递的值进行逻辑处理
<template>
<div>
<h2>我是子组件：我接收到的值是{
{ count }}</h2>
{
{ list }}
</div>
</template>
<script setup>
import { ref, computed, watch, watchEffect, reactive } from "vue";
const props = defineProps(["count"]);
const list = ref([]);
//模拟接口请求
watch(
() => props.count,
(newValue) => {
new Promise((resolve, rej) => {
return setTimeout(() => {
resolve([1,2,newValue])
}, 500);
}).then(res=>{
list.value=res
});
}
);
</script>
<style>
</style>③多级嵌套传参
当需要爷孙组件传递props参数时，需要在父组件进行中转，但是这种中转是没有“意义”的，所以提供了provide 和 inject 可以帮助我们解决这一问题。 一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。
扫描二维码关注公众号，回复：
14868582 查看本文章
父组件：
<template>
<div>
<h1>我是父组件：我拥有的值是{
{ count }}</h1>
<button @click="changCount">更改父组件值</button>
<div>
<Son :count="count"></Son>
</div>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import Son from "./components/son.vue";
const count = ref(0);
function changCount() {
count.value++;
}
provide('count',count)
</script>
<style>
</style>子组件：
<template>
<div>
<h2>我是子组件：我接收到的值是{
{ count }}</h2>
</div>
</template>
<script setup>
import { ref, computed, watch, watchEffect, reactive, inject } from "vue";
const count = inject('count')
</script>
<style>
</style>2.子=>父通信
子组件通过$emit触发父组件方法
父组件：
<template>
<div>
<h1>我是父组件：我拥有的值是{
{ count }}</h1>
<div>
<Son :count="count" @chang-count="changCount"></Son>
</div>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import Son from "./components/son.vue";
const count = ref(0);
function changCount(value) {
console.log("接收子组件参数：", value);
count.value++;
}
provide("count", count);
</script>
<style>
</style>子组件：
<template>
<div>
<h2>我是子组件：我接收到的值是{
{ count }}</h2>
<button @click="sonchangCount('子组件传参')">通过子组件更改父组件值</button>
</div>
</template>
<script setup>
import { ref, computed, watch, watchEffect, reactive, inject } from "vue";
defineProps(["count"]);
const emit = defineEmits(["changCount"]);
function sonchangCount(value) {
emit("changCount", value);
}
</script>
<style>
</style>