码迷,mamicode.com
首页 > 其他好文 > 详细

[Vue]组件——通过$emit自定义组件事件

时间:2018-09-03 13:52:12      阅读:365      评论:0      收藏:0      [点我收藏+]

标签:htm   fonts   nts   dom   ...   自定义组件   log   targe   ops   

 

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自定义组件事件

标签:htm   fonts   nts   dom   ...   自定义组件   log   targe   ops   

原文地址:https://www.cnblogs.com/vickylinj/p/9577797.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!