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

Question

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

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

在Vue.prototype中修改弹出方法例如，"show" 或 "hide"，任何其他。

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

在App.vue

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

main.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);
  }
...

需要弹出-component.vue

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

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

Answer 1

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

我会这样做：

在状态中添加一个布尔值属性（或显示弹出窗口所需的任何数据），反映弹出窗口的显示
使用 App.vue 中的 mapState 将反应式布尔值引入组件
使用 v-if 或在 App.vue 模板中显示，在弹出声明中
创建一个 'showPopup' 采用布尔值并相应地更新状态的突变
随时随地调用突变show/hide弹出窗口

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

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

Answer 2

您以某种方式尝试创建全局组件，您可能希望在不同的项目中使用它。

这是我认为我会这样做的方式 -

如何重用模态对话框，而不是创建 3 个单独的对话框

创建一个单独的 modal 组件，假设 - commonModal.vue.

现在在你的 commonModal.vue 中，接受单身 prop，比如说 data: {}。

现在在 commonModal 的 html 部分

<div class="modal">
  <!-- Use your received data here which get received from parent -->
  <your modal code />
</div>

现在将 commonModal 导入到 consuming/parent 组件。在父组件中创建数据属性，比方说 - isVisible: false，并为要在 modal 中显示的 data 计算属性比方说 modalContent.

现在这样使用

<main class="foo">
   <commonModal v-show="isVisible" :data="data" />
   <!-- Your further code -->
</main>

以上将帮助你 re-use 模态，你只需要从父组件发送 data。

我怎么知道触发了哪个模态对话框？

只需验证 isVisible 属性即可检查 modal 是否打开。如果 isVisible = false 那么你的模式不可见并且 vice-versa

我的全局对话框组件将如何通知其父组件其当前状态

现在，您可能会想如何关闭您的模式并让父组件知道它。单击按钮触发 closeModal

创建一个方法 - closeModal 并在 commonModal 组件内部和 emit 一个事件。

closeModal() { 
  this.$emit('close-modal')
}

现在这将发出一个可以被消费组件侦听的自定义事件。

因此在您的父组件中只需使用此自定义事件，例如关注并关闭您的模态

<main class="foo">
  <commonModal v-show="isVisible" :data="data" @close- modal="isVisible = false"/>
  <!-- Your further code -->
</main>

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

is it correct global component communication in vue?

vue.js

vue-component

vue-cli-3