使用bus实现父子兄弟跨级间传值

最新推荐文章于 2025-04-11 10:23:44 发布

syx_cainiao

最新推荐文章于 2025-04-11 10:23:44 发布

阅读量148

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： js vue.js jquery

本文链接：https://blog.youkuaiyun.com/syx_cainiao/article/details/106756680

前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何在Vue项目中使用自定义的Bus插件实现组件间的自由收缩功能，通过Bus实例化Vue并挂载到原型上，实现组件状态同步，确保组件伸展或收缩时，其他关联组件能响应变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：在项目中，几个组件实现自由收缩，组件间收缩高度相互影响，例如：
在这里插入图片描述

使用bus可以直接在bus.js中创建vue实例，在main.js中引入就可以使用了

在这里我是仿效vuex插件那样制造bus插件来使用的：

const install =(Vue) => {
  const Bus = new Vue({
  	data(){},
  	created(){},
  	methods:{},
   })
  Vue.prototype.$bus = Bus
}
export default install

在main.js中引用：

import VueBus from './vue-bus';
Vue.use(VueBus)

要求：a、b组件任意一个伸展或者收缩，里外一个也随之改变：
bus.js的created中：

 this.$on('isShow',(val) =>{
        this.isShow = val;
      });

在data中设置默认值，默认组件初始状态为收缩：

isShow: false

在a、b组件中：改变bus.js中的isShow值

methods：{
	switchState(){
          let isShow1 = this.isShow;
          isShow1 = !isShow1 ;
          this.$bus.$emit('isShow',isShow1);
    },
},
computed: {
    isShow() {
          return this.$bus.isShow
    }
}