vue.js $emit 自定义事件不起作用答案

【问题标题】：vue.js $emit custom event not workingvue.js $emit 自定义事件不起作用
【发布时间】：2023-03-21 01:51:01
【问题描述】：

我是 vue.js 的新手 (2)。我正在写香草 JS。

当我尝试使用自定义事件（关闭）时，我收到“，预期”和“：预期”的语法错误。我想要的是向视图中的组件添加自定义关闭事件。然后，在组件的模板中，我尝试让点击事件到达自定义关闭事件。它不工作..

HTML

<div id="root" class="container">
    <bulma-modal v-if="showBulmaModal" @close="showBulmaModal = false"></bulma-modal>
    <button @click="showBulmaModal = true" class="button">Show modal</button>
</div>

Vue.component('bulma-modal', {
    template: '<div class="modal is-active"><div class="modal-background"></div><div class="modal-content"><div class="box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><button class="modal-close" @click="$emit('close')"></button></div>'
});

new Vue({
    el: '#root',
    data: {
        showBulmaModal: false
    }
});

有什么我看不到或我做错了吗？我做错了..

【问题讨论】：

您的bulma-modal 模板在close 周围使用单引号，它在第一个模板处结束。试试$emit(\'close\')

标签： javascript vue.js vuejs2

【解决方案1】：

您需要转义您在模板中使用的单引号。

template: '<div class="modal is-active"><div class="modal-background"></div><div class="modal-content"><div class="box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><button class="modal-close" @click="$emit(\'close\')">Close</button></div>'

这是您的代码working。

【讨论】：