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 $發射自定義事件不起作用

回答

相關問題