在:
https://codesandbox.io/s/upbeat-hodgkin-qjt61?file=/src/components/editcategory.vue
在类别上长时间单击后,模式将按预期显示:
但是点击 OK
不点火 close
活动:
<template>
<div>
<p v-longclick="() => longClicked()" @click="longClicked()">
{{ taskItemLocal["name"] }}
</p>
<div v-if="this.showModal" @close="closeModal()">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header"> Edit Category </slot>
</div>
<div class="modal-body">
<slot name="name"> Edit Name </slot>
</div>
<div class="modal-body">
<slot name="delete"> Delete Category </slot>
</div>
<div class="modal-footer">
<slot name="footer">
<!-- default footer -->
<!-- EVENT NOT FIRING -->
<button class="modal-default-button" @click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</div>
</div>
</template>
``` `closeModal()` 不叫,;改变 `showModal` “直接”也失败了。
3条答案
按热度按时间nc1teljy1#
如果要侦听发出该事件的组件中的事件,请使用示例
$on
方法:模板事件处理程序
@close="closeModal()"
用于侦听来自父级的事件。它在子组件中不起作用。工作代码沙盒:https://codesandbox.io/s/loving-kirch-vrhwn?file=/src/components/editcategory.vue .
iezvtpos2#
您已将事件分派给父组件,但在父组件中,您尚未对“关闭”事件执行任何操作。这里,在genericetem.vue中,我使用@close=“closebox($event)”创建了事件侦听器。在这里,它将触发closebox的方法
genericitem.vue
模板上的更改
添加一个closebox方法
在数据上添加editcategorystatus
hmae6n7t3#
你可以这样做你的按钮。你把事情弄得比应该的复杂
此外,这里还有来自官方文档的示例。