?

1.在定義組件時調用內建的?$emit?方法并傳入事件的名字，來向父級組件觸發一個事件enlarge-text：

?

Vue.component('blog-post', {props: ['post'],template: `<div class="blog-post"><h3>{{ post.title }}</h3><button v-on:click="$emit('enlarge-text')">Enlarge text</button><div v-html="post.content"></div></div>` })

?代碼解釋：<button v-on:click="$emit('enlarge-text')">：監聽click事件，click事件被觸發時觸發enlarge-text事件

2.用?v-on?在上述組件上監聽這個事件，就像監聽一個原生 DOM 事件一樣：

?

<blog-post...v-on:enlarge-text="postFontSize += 0.1" ></blog-post> 代碼解釋：v-on:enlarge-text：監聽enlarge-text事件，enlarge-text事件被觸發時執行postFontSize += 0.1

詳情見官網：https://cn.vuejs.org/v2/guide/components.html

轉載于:https://www.cnblogs.com/vickylinj/p/9577797.html

總結

以上是生活随笔為你收集整理的[Vue]组件——通过$emit为组件自定义事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。