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

目次
前言：现在组件通信方法有好多种，我这挑选一部分来讲
1、父传子
2、子传父
3、兄弟之间通信
3.1、父组件充当中央件
3.2、全局事件总线—EventBus
4、爷孙之间通信
5、任意组件、全局

---

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

方案父传子子传父props / emitspropsemitsv-model / emitsv-modelemitsref / emitsrefemitsprovide / injectprovideinjectEventBusemit / on(可用于兄弟、爷孙、全局)emit / on(可用于兄弟、爷孙、全局)Vuex作用于全局作用于全局pinia作用于全局作用于全局

















1、父传子

紧张用到props属性转达，父组件通过自定义属性给子组件传值，子组件用props接收
示例：

 子组件 TitleMore.vue 

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

复制代码

父组件 

1. <template>
2.     <title-more title="基本信息" />
3. </template>
5. <script setup>
6. import TitleMore from "@components/TitleMore.vue"
7. </script>

复制代码

2、子传父

 子组件 

1. // 子组件
2. <template>
3.     <span class="pub-title" @click="onClick">{{ title }}</span>
4. </template>
6. <script setup>
8. // defineEmits 可以直接使用，不需要另外引入
10. const emits = defineEmits(["click"])
11. const onClick = () => {
12.     emits("click",'123')
13. }
14. </script>

复制代码

 父组件 

1. <template>
2.     <title-more title="基本信息" @click="handleClick" />
3. </template>
5. <script setup>
6. import TitleMore from "@components/TitleMore.vue"
8. const handleClick = (val) => {
9.     console.log('val',val)
10. }
11. </script>

复制代码

3、兄弟之间通信

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

3.1、父组件充当中央件

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

1. // A组件
2. <template>
3.     <span class="pub-title">{{ title }}</span>
4. </template>
6. <script setup>
7. const props = defineProps({
8.     title: {
9.         type: String,
10.         default: "",
11.     },
12. })
13. </script>

复制代码

 B组件 

1. // B组件
2. <template>
3.     <span class="pub-title" @click="onClick">12</span>
4. </template>
6. <script setup>
7. const emits = defineEmits(["click"])
8. const onClick = () => {
9.     emits("click",'123')
10. }
11. </script>

复制代码

 C组件(父组件) 

1. <template>
2.     // A组件
3.     <other :title="title" />   
5.     // B组件
6.     <title-more @click="handleClick" />
7. </template>
9. <script setup>
10. import { ref } from "vue"
11. import TitleMore from "@components/TitleMore.vue"
13. const title = ref('')
14. const handleClick = (val) => {
15.     title.value = val
16.     console.log('val',val)
17. }
18. </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

复制代码

 父组件 

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

复制代码

 子组件 

1. <template>
2.     <span>{{ text }}</span>
3. </template>
5. <script setup>
6. import { ref,onBeforeUnmount } from "vue"
7. import EventBus from "@common/event-bus"
9. const text = ref('')
11. // 第一种
12. EventBus.on('p-click', (val)=>{
13.   text.value = val
14.   console.log('获取的值val','val')
15. })
17. // 另一种写法
18. const funs = (xxx) =>{
19.     console.log('接收的值为',xxx)
20. }
21. EventBus.on('p-click',funs)
22. EventBus.off('p-click',funs)
25. onBeforeUnmount(() => {
26.     // 取消单个监听-第一种
27.     EventBus.off('p-click')
28.    
29.     // 全部取消
30.     EventBus.all.clear()
31. })
32. </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利用方式​​​​​​​ 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。