文档章节

Vue.js学习系列(四十四)-- 自定义事件

博为峰教研组
 博为峰教研组
发布于 2017/04/05 19:17
字数 324
阅读 19
收藏 0

父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即:

t  使用 $on(eventName) 监听事件

t  使用 $emit(eventName) 触发事件

另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

以下我们通过记录按钮点击的次数这个实例来学习在vue.js中如何自定义事件。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<div id="counter-event-example">

<p>{{total}}</p>

<btn v-on:increment="incrementTotal"></btn>

<btn v-on:increment="incrementTotal"></btn>

</div>

</div>

<script type="text/javascript">

Vue.component('btn',{

template:'<button  v-on:click="increment">{{counter}}</button>',

data:function () {

return{

counter:0

}

},

methods:{

increment:function () {

this.counter+=1

this.$emit('increment')

}

},

})

new Vue({

el:"#counter-event-example",

data:{

total:0

},

methods:{

incrementTotal:function () {

this.total+=1

}

}

})

</script>

 

</body>

</html>

运行结果如下:

点击下面的2个按钮中任意按钮,该按钮上的数字会累加,同时最上面的数字也会累加。

 

如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如:

<component v-on:click.native="doTheThing"></component>

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
Vue新手向:14篇教程带你从零撸一个Todo应用

欢迎来到 Vue2.x Todo 系列教程,这个教程将手把手教你从零开始使用 Vue 搭建一个 Todo(待办事项)应用。 书写此教程的动机 Vue 作者尤雨溪在 新手向:Vue 2.0 的建议学习顺序 中给出了中肯...

追梦人物
01/16
0
0
mpvue: vuejs和小程序碰撞出来的火花

微信自推出小程序以来,热度一直居高不下,各大公司开始专门开发小程序,但是小程序自定义的wxml和wxss和自己定义的语法,让被三大框架统治的前端江湖头疼不易,因为需要专门为小程序开发一...

蜗牛老湿
2018/05/18
0
0
Vue 全站缓存之 vue-router-then :前后页数据传递

连续预告了好几天,总算写到这篇了。 系列篇1:Vue 全站缓存之 keep-alive : 动态移除缓存 系列篇2:Vue 全站缓存二:如何设计全站缓存 本篇为系列篇3:Vue 全站缓存之 vue-router-then :前...

wanyaxing
2018/08/02
0
0
Vue.js进阶教程第一步:vue2.0前端-何韬-专题视频课程

Vue.js进阶教程第一步:vue2.0前端—22327人已学习 课程介绍 Vue.js2.0进阶教程第一部分,Vue.js框架基础入门视频课程主要学习Vue.js的基础语法结构,api使用方式,vue.js组件的驱动方式,如...

pkutao
2017/01/04
0
0
Vue 全站缓存之 vue-router-then 实现原理

系列篇1:Vue 全站缓存之 keep-alive : 动态移除缓存 系列篇2:Vue 全站缓存二:如何设计全站缓存 系列篇3:Vue 全站缓存之 vue-router-then :前后页数据传递 本篇为系列篇4:Vue 全站缓存...

wanyaxing
2018/08/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS5.11配置Let's Encrypt免费证书

安装环境: [root@WQ02 opt]# lsb_release -aLSB Version::core-4.0-amd64:core-4.0-ia32:core-4.0-noarch:graphics-4.0-amd64:graphics-4.0-ia32:graphics-4.0-noarch:printing-4.0-amd6......

m_lm
37分钟前
1
0
看看Canonical分享的2018年的十大Linux Snap

导读 Linux在2018年最令人耳目一新的一个方面是Snaps的普及。 Canonical透露,集装箱化的包装已经取得了巨大的成功。今天,Ubuntu制造商分享了2018年的十大Snap。 随着2018年即将结束,我发现...

问题终结者
50分钟前
3
0
天啦噜!在家和爱豆玩"剪刀石头布",阿里工程师如何办到?

阿里妹导读:如今,90、00后一代成为消费主力,补贴、打折、优惠等“价格战”已很难建立起忠诚度,如何与年轻人建立更深层次的情感共鸣?互动就是一种很好的方式,它能让用户更深度的参与品牌...

阿里云官方博客
今天
1
0
聊聊flink的Table API及SQL Programs

序 本文主要研究一下flink的Table API及SQL Programs 实例 // for batch programs use ExecutionEnvironment instead of StreamExecutionEnvironmentStreamExecutionEnvironment env = Stre......

go4it
今天
3
0
mysqldump应用

备份单个库/表数据或库/表结构 命令行下具体用法如下: mysqldump -u用戶名 -p密码 -d 数据库名 表名 > 备份文件名 1、导出数据库为dbname的表结构(其中用戶名為root,密码为dbpasswd,生成的...

阿dai
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部