Vue3组件通信
组件：对数据和方法的简单封装。在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 可以帮助我们解决这一问题。 一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。
父组件：
<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>
