时间戳

首页 > 解决方案 > 我听不到从发射孩子到父母的交流

vue.js - 我听不到从发射孩子到父母的交流

问题描述

我有两个组件 App.vue 和 ModalWindow.vue

我正在尝试在父组件 App.vue 中打开一个模式窗口（ModalWindow.vue），单击按钮，事件“toggle”调用函数“toggleModal”

但我不能请告诉我我的错误在哪里

这是我的 App.vue

<button @toggle="toggleModal">  
  <svg class="user-nav__icon"  >
    <use xlink:href="@/img/sprite.svg#icon-chat"></use>
  </svg>
</button>

<script>
import ModalWindow from '../UI/ModalWindow.vue'

export default {
  components: {
    ModalWindow
  },
  mixins: [ModalWindow],
  methods: {  
     toggleModal() {
     this.toggle();
    }
  }
}
</script>

这是我的 ModalWindow.vue

<template>
<template>
    <div>        
        <transition name="fade">
            <div class="modal">
                <div class="modal-message">
                    <div class="modal-header">
                        <h2>Vue Modal</h2>
                    </div>
                    <div class="modal-body">
                        <p>Modals are so easy in Vue.js!</p>
                    </div>
                </div>

            </div>
        </transition>
    </div>
</template>

<script>
export default {
        name: 'ModalWindow',
       data() {
              return {  
           show: false         
              }                
       },
       methods: {  
        toggle() {
            this.show = !this.show
        }
    }
}
</script>

标签： vue.jsvuejs2vue-componentvuetify.jsvue-router

解决方案

不需要 $emit，因为您没有在任何地方收听发出的事件。我想看看你的问题，你的要求需要 mixin 机制来调用你的 modal.vue 的切换方法。

就在下面

components: {
    ModalWindow
  }

在您的app.vue中添加该行

mixins: [ModalWindow]

并在您的 toggleModal 方法中添加以下行

this.toggle();

就在 this.show 行的下方。如果 mixins 有效，您还可以从组件对象中删除 ModalWindow。

推荐阅读