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 相关文章推荐
js模拟弹出效果代码修正版
Aug 07 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
js 代码优化点滴记录
Feb 19 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 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
wordpress之wp-settings.php
2007/08/17 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
php实现生成验证码实例分享
2016/04/10 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
原生js实现随机点名
2020/07/05 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
分享Python切分字符串的一个不错方法
2018/12/14 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
园林施工员岗位职责
2013/12/11 职场文书
小班重阳节活动方案
2014/02/08 职场文书
幼儿园标语大全
2014/06/19 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
PO模式在selenium自动化测试框架的优势
2022/03/20 Python
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫