vue.js $发射自定义事件不起作用

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

当我尝试使用自定义事件（关闭）时，出现语法错误“，expected”和“：expected”。我想要的是向视图中的组件添加自定义关闭事件。然后，在组件的模板中，我尝试让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>

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 
    } 

});

有什么我无法看到或我做错了吗？我无法理解它。

来源

2017-03-25 Gijsberts

你的'bulma-modal'模板在'close'周围使用单引号，它在第一个模板结束模板。试试'$ emit（\'close \'）' – Bert

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

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。

来源

2017-03-25 02:12:56 Bert

vue.js $发射自定义事件不起作用

回答

相关问题