Javascript 听Vue.js的基础事件？

我正在Vue.js中构建一个应用程序，其总体结构如下：

<app>
    <filters-component></filters-component>
    <div class="off-canvas-content">
        <nav-component></nav-component>
        <div class="row card-grid">
            <card-component v-for="item in items">
                <modal-component v-if="launchModal === true"></modal-component>
            </card-component>
        </div>
    </div>
</app>

这允许我仅当

launchModal

的数据元素设置为true（单击按钮启动模态后）时，才在DOM上呈现模态。这很好用，但当它关闭时，我需要做相反的事情

根据基金会的文档，Reveal（模态）组件在关闭时应发出一个名为

closed.zf.Reveal

的事件

调用时，如何在父元素（卡组件）上侦听此事件，然后将

launchModal

更改为false

---

谢谢

本质上，这可能归结为，在您的

模态组件中（将这些添加到modal.vue中的脚本中）

或者类似的东西，取决于发出事件的元素。如果其他一些元素发出
closed.zf.discover
事件，则可以向其添加
ref=“modal”
，然后使用
this.$refs.modal.addEventListener
和
this.$refs.modal.removeEventListener

那你就可以

<modal-component v-if="launchModal === true"
                 @modal-closed="launchModal = false">
</modal-component>

事实上，这确实抓住了这个事件。问题是，无论出于何种原因，基金会将该模式移动到VUE之外，并在初始化该模式时将其追加到文档的底部。当
launchModal
设置为
false
时，这会导致Vue抛出错误，因为该模式不再位于Vue中，而Vue在尝试将其从DOM中删除时会发出抱怨

在这种情况下，我建议您在模式内使用您的
v-if
。这将导致这样的组件

Vue.component("modal", {
  props:["show"],
  template: "#modal-template",
  watch:{
    show(newVal){
      if (newVal)
        $(this.$el).foundation("open")
    }
  },
  methods:{
    onModalClosed(){
      this.$emit("modal-closed")
    }
  },
  mounted() {
    new Foundation.Reveal($(this.$el))
    $(this.$el).on("closed.zf.reveal", this.onModalClosed);
  },
  beforeDestroy() {
    $(this.$el).off("closed.zf.reveal", this.onModalClosed);
  }
});

模板是

<template id="modal-template">
  <div class="reveal" data-reveal>
    <div v-if="show">
      Stuff that is expensive to render
    </div>
    <button class="close-button" data-close aria-label="Close modal" type="button">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
</template>


渲染成本很高的东西
&时代；

这是工作原理。
您能否显示
模态组件的Vue代码
？这是两个组件的要点。我肯定我在这方面做得很不对，这是我第一次在大型应用程序上使用Vue，请温柔一点。英雄联盟我知道很多JS都可以重构，我只是想先让一切正常工作；）仅供参考：正在传递的数据来自父应用程序上的API调用，并通过道具传递。这是卡、组件，我们可以看到模式组件吗？它在那里，您需要向下滚动一点；）德普。我看到了。我想在我的回答中将是
this.$el
。在销毁之前不要忘记
{this.$el.removeEventListener（'closed.zf.reveal'，（）=>this.$emit（'modal-closed'）}
@BertEvans谢谢！这对我来说很有意义，但由于某些原因，它仍然不起作用。我假设模态组件上的事件实际上应该是
@modal closed
，正如组件的mounted/beforedistroy生命周期中所引用的那样，但出于某种原因，这仍然不会将其切换为false。我想知道模态到底是不是没有发出那个事件？老实说，基金会6的JS文档很糟糕。@ Matrx爪是的，事件名称在监听器上是错误的。我修好了。我来看看文件。我现在明白了。加入我邀请你去的房间。@RoyJ似乎被束缚住了。
Vue.component("modal", {
  props:["show"],
  template: "#modal-template",
  watch:{
    show(newVal){
      if (newVal)
        $(this.$el).foundation("open")
    }
  },
  methods:{
    onModalClosed(){
      this.$emit("modal-closed")
    }
  },
  mounted() {
    new Foundation.Reveal($(this.$el))
    $(this.$el).on("closed.zf.reveal", this.onModalClosed);
  },
  beforeDestroy() {
    $(this.$el).off("closed.zf.reveal", this.onModalClosed);
  }
});

<template id="modal-template">
  <div class="reveal" data-reveal>
    <div v-if="show">
      Stuff that is expensive to render
    </div>
    <button class="close-button" data-close aria-label="Close modal" type="button">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
</template>