我听不到从发射孩子到父母的交流

Posted 2023-02-23

【中文标题】我听不到从发射孩子到父母的交流

【英文标题】：I can not listen from emitting child to parent communication

【发布时间】：2021-02-23 05:27:45

【问题描述】：

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

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

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

This.is my 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文件的所有内容，不需要分成脚本和html内容。另外我认为scss不需要在这里发帖

你好像没有在app.vue中使用ModalWindow

我编辑了..不是那个错误..这是我在这里犯的错误

请分享您如何在 app.vue 中使用ModalWindow？

【参考方案1】：

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

就在下面

components: 
    ModalWindow
  

在您的 app.vue 中添加该行

mixins: [ModalWindow]

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

this.toggle();

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

【讨论】：

能够看到任何错误吗？@JustinMoreyl 只需在此处发布您的 mixin 更新代码。将尝试从那里指导您

有些东西在这里不起作用，在我看来

是的，我正要这么说。您能否仅注释掉模态的核心逻辑，然后尝试打开一个空对话框。它将帮助我们了解 mixin 是否有效

export default name: 'ModalWindow', data() return show: false ,