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
// 子组件
<template>
<span class="pub-title">{{ title }}</span>
</template>
<script setup>
// defineProps 可以直接使用，不需要另外引入
/**
* @property {String} title标题
*/
const props = defineProps({
title: {
type: String,
default: "",
},
})
</script> 父组件
<template>
<title-more title="基本信息" />
</template>
<script setup>
import TitleMore from "@components/TitleMore.vue"
</script> 2、子传父
子组件
// 子组件
<template>
<span class="pub-title" @click="onClick">{{ title }}</span>
</template>
<script setup>
// defineEmits 可以直接使用，不需要另外引入
const emits = defineEmits(["click"])
const onClick = () => {
emits("click",'123')
}
</script> 父组件
<template>
<title-more title="基本信息" @click="handleClick" />
</template>
<script setup>
import TitleMore from "@components/TitleMore.vue"
const handleClick = (val) => {
console.log('val',val)
}
</script> 3、兄弟之间通信
[*]一种方法是父组件允当两个子组件之间的中央件
[*]全局事件总线—EventBus（可以用于兄弟、爷孙、任意组件通信）
3.1、父组件充当中央件
假设有A、B、C页面，其中A、B为兄弟组件、C为父组件
A组件
// A组件
<template>
<span class="pub-title">{{ title }}</span>
</template>
<script setup>
const props = defineProps({
title: {
type: String,
default: "",
},
})
</script> B组件
// B组件
<template>
<span class="pub-title" @click="onClick">12</span>
</template>
<script setup>
const emits = defineEmits(["click"])
const onClick = () => {
emits("click",'123')
}
</script> C组件(父组件)
<template>
// A组件
<other :title="title" />
// B组件
<title-more @click="handleClick" />
</template>
<script setup>
import { ref } from "vue"
import TitleMore from "@components/TitleMore.vue"
const title = ref('')
const handleClick = (val) => {
title.value = val
console.log('val',val)
}
</script> 3.2、全局事件总线—EventBus
// 安装
npm install mitt -S 在assets新建个common文件夹，接着再创建event-bus.js（这个文件定名根据你们的环境来定）
// event-bus.js
import mitt from "mitt";
const EventBus = mitt()
export default EventBus 父组件
<template>
<span @click="onClick"></span>
</template>
<script setup>
import { ref } from "vue"
import EventBus from "@common/event-bus"
const onClick = () => {
EventBus.emit("p-click", '父传子文本信息');
}
</script> 子组件
<template>
<span>{{ text }}</span>
</template>
<script setup>
import { ref,onBeforeUnmount } from "vue"
import EventBus from "@common/event-bus"
const text = ref('')
// 第一种
EventBus.on('p-click', (val)=>{
text.value = val
console.log('获取的值val','val')
})
// 另一种写法
const funs = (xxx) =>{
console.log('接收的值为',xxx)
}
EventBus.on('p-click',funs)
EventBus.off('p-click',funs)
onBeforeUnmount(() => {
// 取消单个监听-第一种
EventBus.off('p-click')
// 全部取消
EventBus.all.clear()
})
</script> 4、爷孙之间通信
[*]provide/inject
[*]EventBus
eventBus上述有讲过这里就不讲了，讲一下provide/inject
父组件
import { reactive,provide,ref } from 'vue';
provide('page', ref('1'))
provide('user', reactive({
age: 11,
name: '张三'
})) 子组件
import { inject } from 'vue';
const user = inject("user");
const page = inject("page"); 爷孙组件无论任何一个组件内的值发生改变，两个组件的值都会举行相应式的数据更新。
5、任意组件、全局
[*]provide/inject
[*]EventBus
[*]Vuex
[*]Pinia
扩展：
vue2/vue3 EventBus事件总线(用于组件通信)
vue2/vue3 Provide和Inject利用方式
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]