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 版本会在 ...
随机推荐
- el-upload 上传文件和上传图片的基本用法
el-upload 上传excel <template> <el-form :model="form"> <el-form-item label=&q ...
- 求求你别用SimpleDateFormat了！
前言 啊哈哈,标题写的比较随意了,其实呢最近在各种面试以及博客中,SimpleDateFormat出镜率确实是比较高了,为什么?其实聪明的你们肯定知道,那必须是有坑呗,是的,那我们就以案例来分析一 ...
- .net后台防止API接口被重复请求
思路大概是这样的: 1.获取到发出请求的客户端的IP 2.将该IP存入Cache作为KEY,将次数作为Value初始化为0,过期时间设置为1分钟 3.每次请求都将value+1,超过指定的次数后返回f ...
- ES6基础
一.新增命令let/const ①:let命令 1.let命令用来声明变量,它的用法类似于var,但是所声明的变量只在let命令所在的代码块内生效. 所以在for循环中,就很适合使用let命令. 上面 ...
- python之循环（增删）内使用list.remove()
dat=['] for item in dat: ': dat.remove(item) print(dat) #按要求是把'0'都删掉的,输出结果是['1', '2', '3', '0'] ?? 首 ...
- vue学习之ajax 简单快速使用axios
vue2.x 推荐使用axios 1.首先使用安装 npm install axios -S 2.在哪用在哪引入 import axios from 'axios' 或则在main.js 中引入 在申 ...
- 《JavaScript高级程序设计》笔记：面向对象的程序设计（六）
面向对象的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象. 理解对象 创建自定义对象的最简单的方法就是创建一个Object的实例,然后再为它添加属性和方法.例 ...
- Dynamics 365中显示格式为URL的字段极少部分URL值录入了不显示怎么回事？
微软动态CRM专家罗勇 ,回复318或者20190315可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 对于如下类型的字段, ...
- lock了mutex的线程退出了却没有unlock时会怎么样？
https://stackoverflow.com/questions/4424193/what-happens-to-mutex-when-the-thread-which-acquired-it- ...
- Jmeter调用自定义jar包
一. 场景 在测试过程中, 可能需要调用第三方jar包来生成测试数据或者使用java工具类来实现业务场景, 普遍的做法是手动调用jar包, 再把这些值赋给jmeter中的某个参数, 以满足业务测试需求 ...