组件与组件通信两种方式:1,用watch:监听仓库值变化。
2,一个组件调用另一个组件方法,及传参
导航组件:
<el-menu background-color="#fff"
text-color="#121212"
active-text-color="#0486FE" :default-active="navselected" :active="navselected" @select="selectItems" router>
</el-menu>
import bus from '@/utils/eventBus'
export default {
methods:{
selectItems(index){
this.$store.state.adminleftnavnum=index;
//按钮选中之后设置当前的index为store里的值。
},
getNavType(){
this.navselected=this.$store.state.adminleftnavnum;
console.log('this.navselected',this.navselected);
//store.state.adminleftnavnum里值变化的时候,设置navselected
}
},
watch: {
// 监测store.state
'$store.state.adminleftnavnum': 'getNavType'
},
mounted(){ //这个可不写,不用也可以
var self = this;
bus.$on("setMenuEvent",function(menu){
self.selectItems(menu);
});
}
}
在其他组件设置改变this.$store.state.adminleftnavnum的值即可
import bus from '@/utils/eventBus'
export default {
created () {
this.$store.state.adminleftnavnum="2-2"; //设置左侧导航2-2 active
},
mounted(){//可不写,
bus.$emit("setMenuEvent",'manage');
}
}
eventBus.js文件做个中转:
import Vue from 'vue'
export default new Vue