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 

// 子组件<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.jsimport 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/injectEventBus

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/injectEventBusVuexPinia

扩展：

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

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

本文链接：https://www.kjpai.cn/news/2024-04-01/152232.html，文章来源：网络cs，作者：亙句，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！