[英]vue.js $emit custom event not working
我是vue.js的新手(2)。 我在写香草JS。
当我尝试使用自定义事件(关闭)时,出现语法错误“,预期”和“:预期”。 我想要的是向视图中的组件添加自定义关闭事件。 然后,在组件的模板中,我尝试使click事件到达自定义关闭事件。 它不起作用..
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>
JS
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
}
});
有什么我看不见的或者做错了吗? 我做错了..
您需要转义模板中使用的单引号。
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>'
这是您的代码正在运行 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.