时间戳

首页 > 解决方案 > 如何使用数据和计算属性而不是事件总线在组件之间进行通信？

vue.js - 如何使用数据和计算属性而不是事件总线在组件之间进行通信？

问题描述

我有一个按钮和一个Overlay组件myComponent。openOverlay在按钮单击时触发。通过 EventBusopenOverlay发出。openedOverlay

 <button
      @click="openOverlay"
</button>
<Overlay />

  methods: {
    openOverlay() {
      EventBus.$emit("openedOverlay");
    },
  },

Overlay组件openedOverlay通过 EventBus 监听。openedOverlay更改overlayOpen为 true 并显示 Modal 组件。

    <Modal
      v-if="overlayOpen"
      :overlayOpen="overlayOpen"
    />

  data() {
    return {
      overlayOpen: false,
    };
  },

 mounted() {
    EventBus.$on("openedOverlay", () => {
      this.openMyOverlay();
    });
  },
  methods: {
    openMyOverlay() {
      this.overlayOpen = true;
    },
  },

如何使用数据和计算属性而不是事件总线在组件之间进行通信？

标签： vue.js

解决方案

组件之间有多种通信方式。您可以使用 vuex 并放入全局存储标志以进行覆盖打开。然后，您将能够从 vue 组件层次结构中的任何位置控制它。你也可以使用 RxJs（哦，我喜欢这个库，但你应该以一种聪明的方式使用它来防止内存泄漏）。在那里，您可以创建一个主题，在您的叠加层中订阅它，并将其作为道具传递给孩子。然后这些孩子可以产生下一个价值。如果您坚持需要使用数据和计算这些决定比您要执行的方法更灵活：要执行它，您应该简单地将一些标志作为道具传递给 Overlay 组件，该标志表示打开模式的必要性。

     <button
      @click="openOverlay = true"
</button>
<Overlay v-model="openOverlay"/>

  data() {
    return {openOverlay: false}
  },

和下一个片段：

<Modal
  v-if="value"
  :overlayOpen="value"
/>
<button @click="$emit('change', false)">close overlay</button>


   data() {
     props: [
       value // here your v-model :)
     ];
   },

推荐阅读