Question

我要添加一种方法，让父级App.vue告诉所有子级组件关闭您打开的每个模式，并让任何给定的子级告诉父级如果某人单击主应用程序div则隐藏覆盖。因此，例如，如果服务页面打开了一个模态以查看一些详细信息，则将在父App.vue组件中设置一个叠加层，如果我单击模态之外的任何位置，则模态将关闭，并且小孩会告诉父母关闭覆盖物。我以这种方式设置它，以便它在全球范围内可用，而不是孤立于单个组件。

<template>
  <div id="app" v-cloak :class="{'overlay-layer' : overlay.active}" v-on:click="close($event)">

    <Header/>

    <transition>
      <router-view v-on:overlay="overlay.active = $event" :closeAllModals="overlay.close"/>
    </transition>

    <Footer/>

  </div>
</template>

<script>
import Header from '@/components/header/Header.vue';
import Footer from '@/components/footer/Footer.vue';

export default {
  components: {
    Header,
    Footer
  },
  props: {
    closeAllModals: Boolean
  },
  data: function() {
    return {
      overlay: { active: false, close: false }
    };
  },
  methods: {
    close(e) {
      if (this.overlay.active && e.toElement.id === 'app') {
        this.overlay = {
          active: false,
          close: true
        }
      }
    }
  }
};
</script>

问题是，这仅执行一次，因此例如在服务页面中，我有：

import Header from '@/components/header/Header.vue';
import Footer from '@/components/footer/Footer.vue';

export default {
  name: 'services',
  components: {
    Header,
    Footer
  },
  props: {
    closeAllModals: Boolean
  },
  data: function() {
    return {
      overlay: false,
      activeMember: Object,
    };
  },
  methods: {
    setActiveMember(member, open) {
      this.activeMember = member;
      if (open) {
        this.activeMember.active = true;
        this.overlay = true;
      } else {
        this.activeMember.active = false;
        this.overlay = false;
      }
      this.$emit('overlay', this.overlay);
      this.$forceUpdate();
    },
  watch: {
    closeAllModals: function() {
      this.activeMember.active = false;
      this.overlay = false;
      this.$forceUpdate();
      console.log('runs once');
    }
  }
};

所以这有效，但仅在第一次有效。该道具仅将更新后的值发送给孩子一次。我尝试在孩子中观看道具并使用forceUpdate，但它不起作用。如何使它每次运行？

Answer 1

当组件必须在不同的父级/子级之间相互交谈时，全局事件总线可能会有所帮助。以下是关于此的很好的写法：

https://alligator.io/vuejs/global-event-bus

注意：但是请确保仅在必要时使用它，并在组件的beforeDestroy生命周期中删除侦听器

属性值未在子组件Vue.js中更新

1 个答案: