使用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是否为真值添加样式,这里代码我就不粘贴了

Vue 2中,要实现兄弟组件的即时并刷新页面,你可以采用以下几种方法: 1. **通过props向下递**: 如果父组件需要向子组件递数据并更新子组件,可以将数据作为prop递下去。当父组件的数据发生改变并触发`$emit`事件,子组件监听这个事件并在接收到新的数据后更新自身。 ```html <!-- 父组件 --> <child-component :data="parentData" @updateData="handleUpdate"></child-component> <script> export default { methods: { handleUpdate(newData) { this.parentData = newData; // 更新后立即触发视图更新 } } }; </script> ``` 2. **Vuex(状态管理库)**: 当你需要整个应用内的组件共享数据并且需要实时更新时,可以使用 Vuex。创建一个store来存储数据,并在需要的地方通过`this.$store.state`访问或修改。 ```javascript // store.js import Vue from 'vue'; import Vuex from 'vuex'; const state = { sharedData: {} }; const mutations = { updateData(state, newData) { state.sharedData = newData; } }; export default new Vuex.Store({ state, mutations }); // 子组件 export default { computed: { data() { return this.$store.state.sharedData; } }, watch: { $data: { handler(newValue) { // 刷新页面或其他操作 }, deep: true } } }); ``` 3. **自定义事件 bus (Event Bus)**: 可以创建一个独立的全局事件中心,让兄弟组件之通过发布/订阅的方式通信。当数据更新后,发送事件通知所有订阅者。 ```javascript // eventBus.js import Vue from 'vue'; export const EventBus = new Vue(); // 子组件 methods: { sendData() { EventBus.$emit('updateData', this.data); } } // 父组件 methods: { refreshPageOnDataChange(data) { this.refresh(); }, ...{ mounted() { EventBus.$on('updateData', this.refreshPageOnDataChange); }, beforeDestroy() { EventBus.$off('updateData', this.refreshPageOnDataChange); } } } ``` **相关问题--:** 1. 使用Vuex时,如何确保数据变化后的同步更新? 2. 自定义事件bus应该如何处理组件销毁时的清理工作? 3. 怎么样避免父子组件之的直接依赖,提升代码的可复用性和灵活性?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值