对vue中v-on绑定自定事件的实例讲解
更新时间：2018年09月06日 09:45:53 作者：有一个王小森
今天小编就为大家分享一篇对vue中v-on绑定自定事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于官网vue中v-on绑定自定义事件的个人理解
对官网实例进行了一些修改，如下图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on绑定自定义事件</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ total }}</p>
<button-counter v-on:increment="father1"></button-counter>
<button-counter v-on:incr="father2"></button-counter>
<button-counter v-on:inc="father1"></button-counter>
</div>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="child">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
child:function(){
this.counter += 1;
this.$emit('increment');
this.$emit('incr');
this.$emit('inc');
}
}
});
new Vue({
el: '#app',
data: {
total: 0
},
methods: {
father1: function () {
this.total += 1
},
father2: function () {
this.total -= 1
}
}
})
</script>
</body>
</html>
点击第一个按钮浏览器的执行顺序如图所示：
步骤一：点击第一个按钮，执行子组件的函数child
步骤二：分别触发该按钮中的事件$emit(‘ ')；
步骤三：监听到 v-on:increment 事件，
步骤四：执行父组件监听子组件的事件father1；
以上这篇对vue中v-on绑定自定事件的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
.sync 修饰符所提供的功能,当一个子组件改变了一个prop的值时,这个变化也会同步到父组件中所绑定,下面这篇文章主要给大家介绍了关于Vue中子组件向父组件传值以及.sync修饰符的相关资料,需要的朋友可以参考下2022-11-11
webpack dev-server代理websocket问题
这篇文章主要介绍了webpack dev-server代理websocket问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了Ant Design Vue如何生成动态菜单a-menu问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了详解解决使用axios发送json后台接收不到的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
本文主要介绍了el-table渲染慢卡顿问题最优解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流程,同时,还强调了浏览器兼容性、HTTPS环境、权限问题和性能优化的重要性,感兴趣的朋友一起看看吧2025-03-03
本文主要介绍了react里组件通信的几种方式小结,包含了5种方式,主要是props传递,回调函数作为props,Context,Redux或MobX,refs,具有一定的参考价值,感兴趣的可以了解一下2024-06-06
atom-design(Vue.js移动端组件库)手势组件使用教程
这篇文章主要介绍了atom-design(Vue.js移动端组件库)手势组件使用教程,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
在Element UI或Element Plus中,使用el-input组件时,可以通过suffix插槽添加单位显示,如果设置了type为'number',滚轮滚动可能会导致数值微调,解决方法是阻止滚轮事件的默认行为,并用CSS隐藏掉输入框的上下箭头,确保数值输入的准确性,这样既美观又提升了用户体验2024-09-09
Vue.js作为现代前端开发中的佼佼者,其组件系统是构建高效、灵活和可扩展用户界面的关键,本文带大家深度探索 Vue.js 组件的核心奥义,感兴趣的小伙伴可以了解下2024-12-12
最新评论