vue 不同界面的通信

Question

公共组件：bar.vue
里面有调用接口的一个方法。
methods: { wishSign() { } }

公共模板：cn.vue
全局调用了bar.vue
import VMbar from '~/components/base/bar';

界面：datail.vue
需求：我想在datail.vue里面的一个点击事件里面触发bar.vue里面的一个方法怎么做了。我用ref也获取不到bar.vue里面的方法。主要是在公共模板：cn.vue全局调用了。我直接获取不到bar.vue里面的方法。怎么才能在datail里面调用wishSign这个方法。

Answer 1

有两个方式：

1. 将全局组件放在某个全局环境中，比如：

// bar.vue
{
  methods: {
    wishSign() {
    
    }
  },
  beforeCreate() {
    Vue.prototype.$bar = this;
  }
}

// detail.vue
{
  methods: {
    onClick() {
      this.$bar.wishSign();
    },
  }
}

这种方式使得组件依赖全局环境中的 $bar 变量。算是比较强耦合的一种结构，不过通常来说也不是太大的问题，只要你不滥用。

2. 使用全局的事件总线

以前官方文档介绍过，现在找不到了。大概方案是声明一个 Vue 实例作为全局事件总线，所有注册侦听器都通过它来进行：

// event.js
export const bus = new Vue();

// bar.vue
import {bus} from './event';
{
  methods: {
    wishSign() {
    
    }
  },
  beforeCreate() {
    bus.on('some-event', this.wishSign);
  }
}

// detail.vue
import {bus} from './event';
{
  methods: {
    onClick() {
      bus.$emit('some-event');
    }
  }
}

这样结构耦合程度更低。

Answer 2

不建议这种调用方式。 这种调用方式对于他人来说难以理解，难以调试和修改。

建议的做法是通过父子组件通信或者全局store的方式管理数据， 数据的改变去触发方法的调用。

Answer 3

建议使用vuex