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. EscapeAndUnescapeUtil【java模拟js的escape和unescape函数】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 在这里做一个记录,基本代码同参考资料<java模拟js的escape和unescape函数>一样. 效果图     代码 ...

  2. 什么是Servlet(原理，从访问到方法)

    Servlet简介 Servlet是SUN公司提供的一门用于开发动态WEB资源的技术.SUN公司在其API中提供了一个Servlet接口,用户若想开发一个动态WEB资源(即开发一个Java程序向浏览器 ...

  3. RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.3版本全新发布

    1.RDIFramework.NET框架介绍 RDIFramework.NET,基于.NET的快速信息化系统开发.整合框架,为企业或个人快速开发系统提供了强大的支持,开发人员不需要开发系统的基础功能和 ...

  4. ES6躬行记（21）——类的继承

    ES6的继承依然是基于原型的继承,但语法更为简洁清晰.通过一个extends关键字,就能描述两个类之间的继承关系(如下代码所示),在此关键字之前的Man是子类(即派生类),而在其之后的People是父 ...

  5. 浅谈Google Chrome浏览器（理论篇）

    注解:各位读者,经博客园工作人员反馈,hosts涉及违规问题,我暂时屏蔽了最新hosts,若已经获取最新hosts的朋友们,注意保密,不要外传.给大家带来麻烦,对此非常抱歉!!! 开篇概述 1.详解g ...

  6. Tushare模块

    .TuShare简介和环境安装 TuShare是一个著名的免费.开源的python财经数据接口包.其官网主页为:TuShare -财经数据接口包.该接口包如今提供了大量的金融数据,涵盖了股票.基本面. ...

  7. 如何發佈一個完整Node.js Module

    本文會透過以下幾個段落,讓各位一步一步學習如何寫一個自已的Node.js Module並且發佈到npm package上 Node.js Module 結構 我們先建立一個 NodeModuleDem ...

  8. Head First设计模式读书笔记

    阅读指南: 精读一章内容,手工输入一章代码(注1),与书中描述的思想进行印证,实在搞不懂就放过吧.设计模式绝对不会一次就看懂的. 这本书对于理解设计模式很有帮助,就是例子不太符合中国人的思维模式,但是 ...

  9. JavaScript基础-4

    4 流程控制 4.1 顺序结构 顺序结构是程序中最简单.最基本的流程控制,他没有特定的语法结构,程序会按照代码的先后顺序执行,程序中大多数的代码都是这样执行的: 4.2 分支结构 if 分支结构 注意 ...

  10. 关于elementui表单数字校验踩坑记

    需求:1.输入类型是数字.2.数字大小有限制.3.非必填 做法: <el-form-item label="熟悉程度" prop="averageCaseRunTi ...