背景:在项目中,几个组件实现自由收缩,组件间收缩高度相互影响,例如:
使用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是否为真值添加样式,这里代码我就不粘贴了