[Vue]组件——通过$emit自定义组件事件
Posted vickylinj
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[Vue]组件——通过$emit自定义组件事件相关的知识,希望对你有一定的参考价值。
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> ` })
2.用 v-on
在上述组件上监听这个事件,就像监听一个原生 DOM 事件一样:
<blog-post ... v-on:enlarge-text="postFontSize += 0.1" ></blog-post>
详情见官网:https://cn.vuejs.org/v2/guide/components.html
以上是关于[Vue]组件——通过$emit自定义组件事件的主要内容,如果未能解决你的问题,请参考以下文章
vue中$refs, $emit, $on, $once, $off的使用详解