美文网首页
Vue3_24(兄弟组件传参和Bus)

Vue3_24(兄弟组件传参和Bus)

作者: BingJS | 来源:发表于2022-12-12 19:02 被阅读0次

1. 借助父组件传参

例如父组件为App 子组件为A 和 B他两个是同级的

<template>
    <div>
        <A @on-click="getFalg"></A>
        <B :flag="Flag"></B>
    </div>
</template>
    
<script setup lang='ts'>
import A from './components/A.vue'
import B from './components/B.vue'
import { ref } from 'vue'
let Flag = ref<boolean>(false)
const getFalg = (flag: boolean) => {
   Flag.value = flag;
}
</script>
    
<style>
</style>

A 组件派发事件通过App.vue 接受A组件派发的事件然后在Props 传给B组件 也是可以实现的
缺点就是比较麻烦 ,无法直接通信,只能充当桥梁

2. Event Bus

我们在Vue2 可以使用emit 传递on监听 emit传递过来的事件
这个原理其实是运用了JS设计模式之发布订阅模式

type BusClass<T> = {
    emit: (name: T) => void
    on: (name: T, callback: Function) => void
}
type BusParams = string | number | symbol 
type List = {
    [key: BusParams]: Array<Function>
}
class Bus<T extends BusParams> implements BusClass<T> {
    list: List
    constructor() {
        this.list = {}
    }
    emit(name: T, ...args: Array<any>) {
        let eventName: Array<Function> = this.list[name]
        eventName.forEach(ev => {
            ev.apply(this, args)
        })
    }
    on(name: T, callback: Function) {
        let fn: Array<Function> = this.list[name] || [];
        fn.push(callback)
        this.list[name] = fn
    }
}
 
export default new Bus<number>()

然后挂载到Vue config 全局就可以使用啦

相关文章

  • Vue3_24(兄弟组件传参和Bus)

    1. 借助父组件传参 例如父组件为App 子组件为A 和 B他两个是同级的 A 组件派发事件通过App.vue 接...

  • Vue总线Bus兄弟组件传参

    一、前言 使用场景:在vue项目较小的情况,使用bus总线思路来完成vuex的传值功能。 二、内容 、、、 //...

  • vue组件传参问题

    在vue项目中会经常遇到组件传参问题,今天就来了解一下父子组件和兄弟组件传参 父组件传值给子组件 *父组件通过 ...

  • vue的Bus使用

    父子页面的传参 1、定义Bus 2、挂载Bus 将bus挂载到vue.prototype上 3、子组件调用 在子组...

  • vue组件之间通信

    vue父组件给子组件传参使用props子组件给父组件传参使用时间派发$dispatch兄弟组件之间传递参数使用vuex

  • 状态管理Bus的使用

    Bus 1. 父子组件之间通信 父传子 props 子传父 $emit 事件触发 2. 兄弟之间传值 同一父组件兄...

  • eventbus事件总线

    经常听说组件之间传参有一种方式是eventbus,常用于兄弟组件之间传参。但是我发现不只是兄弟之间可以用呀,为什么...

  • vue 传参 和 插槽

    组件传参 1. provide 和 inject 祖先后代传值 2. 兄弟组件传承 //父组件是同一个 3.$Bu...

  • SSM单体架构项目 (下)

    Vue 组件 组件导入 组件传参 props 组件传参,父组件向子组件传参 分页 引入分页组件

  • 组件传值之兄弟传值

    兄弟传值: 1、如果有共同的父组件,我们可以使用子传父,父传子 2、通过bus总线传值可以应用在任何情况的兄弟传值...

网友评论

      本文标题:Vue3_24(兄弟组件传参和Bus)

      本文链接:https://www.haomeiwen.com/subject/ntvsdrtx.html