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. java~springboot~ibatis Invalid bound statement (not found)原因

    事实起因 最近在ORM上使用了ibatis,感觉挺繁琐的,没有jpa来的直接,但项目非要用也没有办法,最近在进行开发过程中出现了一个问题Invalid bound statement (not fou ...

  2. vue里如何灵活的绑定class以及内联style

    在我们平常的前端开发中少不了对DOM的操作,以及样式的动态控制,那我们在使用vue的时候该如何灵活的绑定class呢 1.最简单一个class绑定 v-bind:class设置一个对象,可以动态地切换 ...

  3. kubernetes系列12—二个特色的存储卷configmap和secret

    本文收录在容器技术学习系列文章总目录 1.configmap 1.1 认识configmap ConfigMap用于保存配置数据的键值对,可以用来保存单个属性,也可以用来保存配置文件.ConfigMa ...

  4. Yii2设计模式——Yii2中用到哪些设计模式？

    "Yii2设计模式"包含了两个方面的内容:1.设计模式,2.Yii2框架. <设计模式>一书虽然以JAVA语言来表达设计模式的思想,但是设计模式远不限制于某一种特定的语 ...

  5. 20190409-层叠の层叠上下文、层叠水平、层叠顺序、z-index、伪元素层叠

    写在前面乱七八糟的前言: 此"八卦"的源于,在写下图这个圆滚滚的导航布局时,使用元素及其伪元素加上绝对定位完成,但遇到:before或:after伪元素与元素的层叠顺序,就是伪元素 ...

  6. Windows下配置Git多账号github码云

    Windows下配置Git多账号github码云 1.配置了全局用户名和邮箱 $ git config --global user.email "你的邮箱" $ git confi ...

  7. Spinner之下拉多选，监听ID后显示不同Frgment页面

    本人安卓小白,公司最近项目需要用到不同的类型的用户注册,周末下午写完记录一下. 网上找了一堆没有适合自己的(或者说我没找到),写的比较基础,欢迎大家多多指导. 老规矩,先上效果图 网上在线合成的GIF ...

  8. SlidingMenu的使用详解

    前言- 最近自己在做一个Android的程序,需要用到一个侧滑的菜单,发现了SlidingMenu这个开源项目.简单实用,但是实战的时候遇到了许多小问题,今天来记录一下. SlidingMenu的使用 ...

  9. 为了约会，PM的领导能力篇来啦！

    之前我们花了很大力气阐述PM的过程能力成熟度,为的是让PM把项目管理得心应手,早点下班.可再完美的过程也要人来做啊!兄弟们要是不爽了,你还有心思约会么?那怎么才能管好组里的兄弟,让他们好好执行过程,早 ...

  10. 【English】十、"谓语的地方"看到有两个动词：I go say hello.、非谓语形式

    一.I go say hello. 这是一种偏口语的说法.一个句子中不能同时有两个谓语. 标准的用法有: I go and say hello. and 连接这两个动词,表示并列等关系.go and ...