vue.js实战——.native修饰符
https://blog.csdn.net/qq_29468573/article/details/80771625
除了用v-on在组件上监听自定义事件外，也可以监听DOM事件，这时可以用.native修饰符表示监听的是一个原生事件，监听的是该组件的根元素，示例如下：
<my-component v-on:click="handleClick"></my-component> //不会触发
<body>
<div id="app">
<my-component @click="outClick"></my-component> <!-- 点击无弹框，事件绑定失败 -->
<my-component @click.native="outClick"></my-component> <!--点击有弹框，事件绑定成功--->
</div>
<script>
Vue.component('my-component',{
template:'<button>点击事件</button>'
})
var app=new Vue({
el:'#app',
methods:{
outClick(){
alert('this is outer');
}
}
})
</script>
</body>
总结：
在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加“”.native“”事件是无法触发的。
可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。
vue.js实战——.native修饰符的更多相关文章
- vue中的.native修饰符
如果你想在某个组件的根元素上绑定事件,直接使用 @click=''function' 是不生效的,我们可以添加.native修饰符 @click.native=''function'',请看以下dem ...
- Vue中的native修饰符解析
native修饰符 一般来说,vue本身提供了v-on:eventName这个语法来提供vue的时事件绑定,通常使用@eventName这个语法糖代替上述语法. 使用过程中没有考虑@eventName ...
- vue之.native修饰符
.native 修饰符就是用来注册元素的原生事件而不是组件自定义事件的 比如:自定义 Button.vue 组件 <template> <button type="butt ...
- [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)
preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...
- vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- js进阶正则表达式修饰符（i、g、m）（var reg2=/html/gi）
js进阶正则表达式修饰符(i.g.m)(var reg2=/html/gi) 一.总结 1.正则表达式使用:通过那些支持正则表达式的字符串函数来使用(search.match.replace.spli ...
- 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
- vue.js 实战 todo list
vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...
随机推荐
- C#版 - Leetcode49 - 字母异位词分组 - 题解
C#版 - Leetcode49 - 字母异位词分组 - 题解 Leetcode49.Group Anagrams 在线提交: https://leetcode.com/problems/group- ...
- WebUtils【MD5加密（基于MessageDigest）】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 用于MD5加密,主要场景是在调用登录接口时对密码进行MD5加密处理. 效果图 暂不需要 代码分析 基于Java.security.M ...
- 深度链接（DeepLinking）怎样免费实现
深度链接技术(DeepLinking),一般是通过Web页面调用原生App,并把需要的参数通过Uri的形式传递给App,主要使用方式有:两个App之间的广告.App的社交分享.页面跳转App.DSP广 ...
- Django-restframework 之频率源码分析
Django-restframework 之频率源码分析 一 前言 经过权限判断之后就是进行频率的判断了,而频率的判断和权限又不一样,认证.权限和频率的执行流程都差不多,使用配置里面的相关类来进行判断 ...
- IT技术团队管理之成长
------------------------------------------------------------------ 今天先到这儿,希望对您技术领导力, 企业管理,系统架构设计与评估, ...
- 简述ADO.NET的连接层
前面曾提到过ADO.NET的连接层允许通过数据提供程序的连接.命令.数据读取器对象与数据库进行交互.当想连接数据库并且使用一个数据读取器对象来读取数据时．需要实现下面的几个步骤 * 创建.配置.打开连 ...
- 对于jQuery的了解
1.了解jQuery与JavaScript的区别 css --外貌特征Html --躯干,骨架js --运动神经 jQuery就是对JavaScript的一个拓展,封装,就是让JavaScript更好 ...
- Web后端 JAVA实现验证码生成与验证功能
首先,写一个验证码生成帮助类,用来绘制随机字母: <span style="font-size:14px;">import java.awt.Color; impor ...
- 五分钟读懂UML类图（转）
平时阅读一些远吗分析类文章或是设计应用架构时没少与UML类图打交道.实际上,UML类图中最常用到的元素五分钟就能掌握,下面赶紧来一起认识一下它吧: 一.类的属性的表示方式 在UML类图中,类使用包含类 ...
- Golang学习笔记（一）
这个系列学习文章是对ASTAXIE大神的GoWeb编程的读书笔记. 1. 关于GOPATH $GOPATH 是系统中重要的环境变量,他不是Go的安装目录. 假如我们将GOPATH设置在这里: /hom ...