Question

我将模式弹出组件myPopup.vue用于全局。

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

在 Vue.prototype 中制作弹出方法例如“显示”或“隐藏”等等。

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

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

need-popup-component.vue

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

这似乎运作良好，但我不知道这是正确的。还有其他办法吗？

Answer 1

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

我会这样做：

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

这将遵循vue模式。任何处于状态的ui组件都会反映状态，而突变会改变状态。

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

Answer 2

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

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

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

制作一个单独的modal组件，比方说-commonModal.vue。

现在在您的commonModal.vue中，接受单个prop，再说data: {}。

现在在html的{{1}}部分中

commonModal

现在将<div class="modal">  <your modal code /> </div>导入到消费/父组件。在父组件中创建数据属性，假设-commonModal，并且要在isVisible: false中显示的data的计算属性，使modal。

现在像这样使用它

modalContent

以上内容将帮助您重用模式，而您只需要从父组件发送<main class="foo"> <commonModal v-show="isVisible" :data="data" />  </main>。

我如何知道已触发哪个模式对话框？

只需验证data属性即可检查isVisible是否打开。如果modal，则您的模态不可见，反之亦然

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

现在，您可能会想如何关闭模态并让父组件知道它。单击按钮触发器isVisible = false

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

emit

现在，这将发出一个自定义事件，使用方组件可以监听该事件。

因此，在您的父组件中，只需使用以下自定义事件即可，如下所示，然后关闭模式

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

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

2 个答案: