vue.js - vue 中的全局组件通信是否正确？

Question

我为全局制作模态弹出组件myPopup.vue。

并将其导入到App.vue和main.js中 我将其用于全局，定义一些对象 Vue.prototype

在Vue.prototype中制作popup方法 例如，“显示”或“隐藏”，任何其他。

但我认为这可能是反模式.. 我想找到更多最佳实践。

在 App.vue

<div id="app>
  <my-popup-component></my-popup-conponent>
  <content></content>
</div>

ma​​in.js

...
Vue.prototype.$bus = new Vue(); // global event bus
Vue.prototype.$popup = {
  show(params) {
    Vue.prototype.$bus.$emit('showPopup', params);
  },
  hide() {
    Vue.prototype.$bus.$emit('hidePopup');
  }
}

Vue.component('my-popup-component', { ... });
...

myPopup.vue

....
export default {
...

  created() {
    this.$bus.$on('showPopup', this.myShow);
    this.$bus.$on('hidePopup', this.myHide);
  }
...

need-popup-component.vue

methods: {
  showPopup() {
    this.$popup.show({
      title: 'title',
      content: 'content',
      callback: this.okcallback
    }); 
  }
}

看起来效果很好，但我不知道这是否正确。 还有其他办法吗？

Answer 1

在阅读您的解决方案时，我感到非常惊讶，但如果您觉得它简单且有效，为什么不呢？

我会这样做:

• 在状态中添加一个 bool 属性(或显示弹出窗口所需的任何数据)，反射(reflect)弹出窗口的显示
• 在App.vue中使用mapState将响应式 bool 值引入组件
• 在弹出声明中使用 v-if 或在 App.vue 模板中显示
• 创建一个“showPopup”突变，它采用 bool 值并相应地更新状态
• 在需要显示/隐藏弹出窗口时随时随地调用突变

这将遵循 vue 模式。状态中的任何东西，ui 组件反射(reflect)状态，突变改变状态。

你的解决方案可以工作，但是它不遵循 vue 框架，例如 vue 调试工具在你的情况下将毫无用处。我认为最好在一个应用程序中拥有最少数量的模式，以便维护、将其提供给其他人等等。