vue3 常用的组件互相通信(父子、兄弟、爷孙、任意组件)

目录

前言：目前组件通信方法有好多种，我这挑选一部分来讲

1、父传子

2、子传父

3、兄弟之间通信

3.1、父组件充当中间件

3.2、全局事件总线—EventBus

4、爷孙之间通信

5、任意组件、全局

---

前言：目前组件通信方法有好多种，我这挑选一部分来讲

方案	父传子	子传父
props / emits	props	emits
v-model / emits	v-model	emits
ref / emits	ref	emits
provide / inject	provide	inject
EventBus	emit / on(可用于兄弟、爷孙、全局)	emit / on(可用于兄弟、爷孙、全局)
Vuex	作用于全局	作用于全局
pinia	作用于全局	作用于全局

1、父传子

主要用到props属性传递，父组件通过自定义属性给子组件传值，子组件用props接收

示例：

 子组件 TitleMore.vue 

1. // 子组件
4. <script setup>
6. // defineProps 可以直接使用，不需要另外引入
7. /**
8. * @property {String} title 标题
9. */
10. const props = defineProps({
11. title: {
12. type: String,
13. default: "",
14. },
15. })
16. script>

父组件 

3. <script setup>
4. import TitleMore from "@components/TitleMore.vue"
5. script>

2、子传父

 子组件 

1. // 子组件
4. <script setup>
6. // defineEmits 可以直接使用，不需要另外引入
8. const emits = defineEmits(["click"])
9. const onClick = () => {
10. emits("click",'123')
11. }
12. script>

 父组件 

3. <script setup>
4. import TitleMore from "@components/TitleMore.vue"
6. const handleClick = (val) => {
7. console.log('val',val)
8. }
9. script>

3、兄弟之间通信

• 一种方法是父组件允当两个子组件之间的中间件
• 全局事件总线—EventBus（可以用于兄弟、爷孙、任意组件通信）

3.1、父组件充当中间件

假设有A、B、C页面，其中A、B为兄弟组件、C为父组件

 A组件 

1. // A组件
4. <script setup>
5. const props = defineProps({
6. title: {
7. type: String,
8. default: "",
9. },
10. })
11. script>

 B组件 

1. // B组件
4. <script setup>
5. const emits = defineEmits(["click"])
6. const onClick = () => {
7. emits("click",'123')
8. }
9. script>

 C组件(父组件) 

3. <script setup>
4. import { ref } from "vue"
5. import TitleMore from "@components/TitleMore.vue"
7. const title = ref('')
8. const handleClick = (val) => {
9. title.value = val
10. console.log('val',val)
11. }
12. script>

3.2、全局事件总线—EventBus

1. // 安装
2. npm install mitt -S

在assets新建个common文件夹，接着再创建event-bus.js（这个文件命名根据你们的情况来定）

1. // event-bus.js
3. import mitt from "mitt";
5. const EventBus = mitt()
7. export default EventBus

 父组件 

3. <script setup>
4. import { ref } from "vue"
5. import EventBus from "@common/event-bus"
7. const onClick = () => {
8. EventBus.emit("p-click", '父传子文本信息');
9. }
10. script>

 子组件 

3. <script setup>
4. import { ref,onBeforeUnmount } from "vue"
5. import EventBus from "@common/event-bus"
7. const text = ref('')
9. // 第一种
10. EventBus.on('p-click', (val)=>{
11. text.value = val
12. console.log('获取的值val','val')
13. })
15. // 另一种写法
16. const funs = (xxx) =>{
17. console.log('接收的值为',xxx)
18. }
19. EventBus.on('p-click',funs)
20. EventBus.off('p-click',funs)
23. onBeforeUnmount(() => {
24. // 取消单个监听-第一种
25. EventBus.off('p-click')
27. // 全部取消
28. EventBus.all.clear()
29. })
30. script>

4、爷孙之间通信

• provide/inject
• EventBus

eventBus上述有讲过这里就不讲了，讲一下provide/inject

 父组件 

1. import { reactive,provide,ref } from 'vue';
2. provide('page', ref('1'))
3. provide('user', reactive({
4. age: 11,
5. name: '张三'
6. }))

  子组件 

1. import { inject } from 'vue';
2. const user = inject("user");
3. const page = inject("page");

爷孙组件无论任何一个组件内的值发生改变，两个组件的值都会进行响应式的数据更新。

5、任意组件、全局

• provide/inject
• EventBus
• Vuex
• Pinia

扩展：

vue2/vue3 EventBus事件总线(用于组件通信) 

vue2/vue3 Provide和Inject使用方式​​​​​​​