Vue中一个组件调用其他组件的方法详解(非父子组件)

import Detail from "./detail.vue";

// 也可以调用 created、data等
Detail.methods.check();

//  Vuex   全局
state: { 
	tableStatus:false  
	 	}
 mutations:{  
	changeStatus(state,status) {  //  重复赋值
      state.tableStatus = status;
    },
}

 //  A 页面（组件）
computed: {  
  status() {  //  计算属性
    return this.$store.state.tableStatus; //  Vuex 中定义的属性
  }
},
watch:{
  status() {
    this.getTableList();  //   需要调用的方法
  }
},

//  B页面（组件）
closePage() {
    let status = this.$store.state.tableStatus;   // 重新赋值
    this.$store.commit("changeStatus", !status);
},

 window.eventBus = new Vue();

window.eventBus.$emit('setFeaturesData', data)  // 带参数
window.eventBus.$emit('setFeaturesData')  // 不带参数

    window.eventBus.$on('setFeaturesData', (data)=>{ // 带参数
      this.hoveredFeatures = [data]
      this.onClick()
    })

  mounted() {
    this.getTableData()
    window.eventBus.$on('setFeaturesData', ()=>{ // 不带参数
      this.getTableData()
    })
  },

window.eventBus.$off('setFeaturesData')