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 相关文章推荐
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
js 学习笔记(三)
Dec 29 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 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通过字符串调用函数示例
2014/03/02 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
python使用xmlrpc实例讲解
2013/12/17 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
学校花圃的标语
2014/06/18 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
党员干部学习心得体会
2016/01/23 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
python实现自动化群控的步骤
2021/04/11 Python
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python