首页 前端知识 vue3 常用的组件互相通信(父子、兄弟、爷孙、任意组件)

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

2024-02-08 15:02:56 前端知识 前端哥 307 351 我要收藏

目录

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

1、父传子

2、子传父

3、兄弟之间通信

3.1、父组件充当中间件

3.2、全局事件总线—EventBus

4、爷孙之间通信

5、任意组件、全局


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

方案父传子子传父
props / emitspropsemits
v-model / emitsv-modelemits
ref / emitsrefemits
provide / injectprovideinject
EventBusemit / 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使用方式​​​​​​​ 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1540.html
标签
组件通信
评论
会员中心 联系我 留言建议 回顶部
复制成功!