怎么调用兄弟组件的方法?

参考自 百度经验

Vue2的方法

第一种: eventBus

新建一个js文件， 我这里叫做 bus.js；

1
2
3
// bus.js
import Vue from 'vue'; 
export default new Vue();
1
2
3
// 触发的组件
import  bus from '文件路径'
执行：bus.$emit('触发名称', 传输的数据)
1
2
3
4
5
6
7
// 通信的组件
import  bus from '文件路径'
mounted(){
    bus.$on('触发名称', res => {
  		//写你需要的方法
	})
}

第二种：直接在 main.js中 直接如下

1
2
3
4
5
6
7
8
9
10
new Vue({
    el:'#app',
    router,
    template:'<div>${msg}<App/></div>',
    components: {App,Profile},
    data:{
        vm:new Vue(),
        msg:'$mssssg'
    }
})

然后其中一个兄弟组件 执行

1
this.$root.vm.$emit('触发名称', 传输的数据)；

另一个兄弟组件中执行

1
this.$root.vm.$on('触发名称', 传输的数据)；

第三种：同样是直接在 main.js

1
2
3
Vue.prototype.$vm = new Vue();
使用:this.$vm.$emit();
this.$vm.$on();

怎么侦听vuex里数据的变化？

1
2
3
4
5
6
7
watch: {
    '$store.state.xxx': {
      handler: function (newValue, oldValue) {
        console.log(newValue)
      }
    }
  }