https://blog.csdn.net/qq_29468573/article/details/80771625

除了用v-on在组件上监听自定义事件外，也可以监听DOM事件，这时可以用.native修饰符表示监听的是一个原生事件，监听的是该组件的根元素，示例如下：

        <my-component v-on:click="handleClick"></my-component>　　//不会触发
　　　　　　<my-component v-on:click.native="handleClick"></my-component>　　//触发handleClick
<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修饰符的更多相关文章

  1. vue中的.native修饰符

    如果你想在某个组件的根元素上绑定事件,直接使用 @click=''function' 是不生效的,我们可以添加.native修饰符 @click.native=''function'',请看以下dem ...

  2. Vue中的native修饰符解析

    native修饰符 一般来说,vue本身提供了v-on:eventName这个语法来提供vue的时事件绑定,通常使用@eventName这个语法糖代替上述语法. 使用过程中没有考虑@eventName ...

  3. vue之.native修饰符

    .native 修饰符就是用来注册元素的原生事件而不是组件自定义事件的 比如:自定义 Button.vue 组件 <template> <button type="butt ...

  4. [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)

    preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...

  5. vue.js实战——购物车练习（包含全选功能）

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

  6. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  7. js进阶正则表达式修饰符（i、g、m）（var reg2=/html/gi）

    js进阶正则表达式修饰符(i.g.m)(var reg2=/html/gi) 一.总结 1.正则表达式使用:通过那些支持正则表达式的字符串函数来使用(search.match.replace.spli ...

  8. 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站

    这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...

  9. vue.js 实战 todo list

    vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...

随机推荐

  1. HandlerInterceptor里@Autowired对象为空的解决方法

    That's because Spring isn't managing your PagePopulationInterceptor instance. You are creating it yo ...

  2. Spring Boot配置定时任务

    在项目开发过程中,经常需要定时任务来做一些内容,比如定时进行数据统计(阅读量统计),数据更新(生成每天的歌单推荐)等. Spring Boot默认已经实现了,我们只需要添加相应的注解就可以完成定时任务 ...

  3. 自定义Visual Studio.net Extensions 开发符合ABP vnext框架代码生成插件[附源码]

    介绍 我很早之前一直在做mvc5 scaffolder的开发功能做的已经非常完善,使用代码对mvc5的项目开发效率确实能成倍的提高,就算是刚进团队的新成员也能很快上手,如果你感兴趣 可以参考 http ...

  4. python3-随机生成10位包含数字和字母的密码

    方法一: 知识点:random.sample(sequence, k) 从指定序列中随机获取指定长度的片断 import random,string num=string.ascii_letters+ ...

  5. List去重的实现

    List<T> 当T为值类型的时候 去重比较简单,当T为引用类型时,一般根据业务需要,根据T的中几个属性来确定是否重复,从而去重. 查看System.Linq下的Enumerable存在一 ...

  6. 最新阿里Java技术面试题，看这一文就够了！

    金三银四跳槽季即将到来,作为 Java 开发者你开始刷面试题了吗?别急,小编整理了阿里技术面试题,看这一文就够了! 阿里面试题目目录 技术一面(基础面试题目) 技术二面(技术深度.技术原理) 项目实战 ...

  7. JavaSE面试题收集【仅有题目，答案自备】

    一共有140个题目,可以参考下.一个“.java”源文件中是否可以包含多个类(不是内部类)?有什么限制?说说&和&&的区别在Java中如何跳出当前的多重嵌套循环?IO流的分类S ...

  8. 【译】.NET Core 3.0 中的新变化

    .NET Core 3.0 是 .NET Core 平台的下一主要版本.本文回顾了 .Net Core 发展历史,并展示了它是如何从基本支持 Web 和数据工作负载的版本 1,发展成为能够运行 Web ...

  9. javascript中Date常用方法

    一.Date的构造函数 有四种形式的Date构造函数: //1.构造函数没有参数,则返回当前日期的Date对象 var now=new Date(); //2.构造函数的参数为日期的毫秒数,返回距离1 ...

  10. selenium-确认进入了预期页面

    selenium确认进入了预期页面 在自动化操作中,浏览器每次进入一个新的需要,都需要确认该页面是否打开或打开的页面是否是预期的页面 需要进行确认页面后方可进行下一步操作 确认页面有很多中方法,像每个 ...