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

本文介绍如何在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
    }
}

收缩舒展的样式问题:根据三元表达式判断isShow是否为真值添加样式,这里代码我就不粘贴了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值