vue学习笔记之给组件绑定原生事件操作示例


Posted in Javascript onFebruary 27, 2020

本文实例讲述了vue学习笔记之给组件绑定原生事件操作。分享给大家供大家参考,具体如下:

当在父组件中定义一个点击事件,并且在父组件的methods中定义了这个点击事件时,在页面上点击并不会有什么反应。那么该怎么办呢?

我们可以在子组件的template中的dom上定义一个点击事件(原生事件),并且在子组件的methods中定义该点击事件,然而点击页面时也只会alert(child click )

这是为什么呢?父组件的点击事件被vue当成自定义事件,点击后没有检测到,这时需要子组件向父组件触发点击'自定义'事件,即 this.$emit('change') 。then,完成。先响应了child click,然后响应了click。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>组件参数的校验</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <child @change="handleClick"></child>  <!--此处父组件,相当于自定义事件-->
</div>
</body>
</html>
<script>
  Vue.component('Child', {
    template: '<div @click="handleChildClick">child</div>',   /* 原生事件 */
    methods:{
      handleChildClick:function () {
        alert("child click")
        this.$emit('change') // 向父组件传递自定义事件
      }
    }
  })
  var vm = new Vue({
    el: '#app',
    methods:{
      handleClick:function () {
        alert("click");
      }
    }
  })
</script>

但是这样好麻烦哦!!怎么办呢?

我们可以直接在父组件定义的@click后面加上native,告诉vue我定义的事件就是原生事件!!就一切?了

like this:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>组件参数的校验</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <child @click.native="handleClick"></child>  <!--此处声明,原生事件-->
</div>
</body>
</html>
<script>
  Vue.component('Child', {
    template: '<div>child</div>'
  })
  var vm = new Vue({
    el: '#app',
    methods:{
      handleClick:function () {
        alert("click");
      }
    }
  })
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
Require.js的基本用法详解
Jul 03 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 #Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 #Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 #Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 #Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 #Javascript
BootStrap前端框架使用方法详解
Feb 26 #Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 #Javascript
You might like
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
js一组验证函数
2008/12/20 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
tween.js缓动补间动画算法示例
2018/02/13 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
python在windows下实现备份程序实例
2014/07/04 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
用Python写一个自动木马程序
2019/09/17 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
德购商城:德国进口直邮商城
2017/06/13 全球购物
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
正规的求职信范文分享
2013/12/11 职场文书
工程招投标邀请书
2014/01/26 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
付款委托书范本
2014/10/05 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书