详解Vue.js中.native修饰符

心已赠人 2021-09-18 02:34 287阅读 0赞

.native修饰符

**官方对.native修饰符的解释为：**

有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。例如：

<my-component v-on:click.native="doTheThing"></my-component>

**简单点理解就是：**

给普通的HTML标签监听一个事件，之后添加 .native 修饰符是不会起作用的。例如：

<div id="app">
    　　<a href="#" rel="external nofollow" v-on:click.native="clickFun">click me</a>
    </div>

JavaScript代码:

new Vue({
    　　el: '#app',
    　　methods: {
    　　　　clickFun: function(){
    　　　　　　console.log("message: success")
    　　　　}
    　　}
    })

[![2018042414074510.png][]][2018042414074510.png]

给某个组件的根元素上监听一个事件，之后添加 .native 修饰符就会起作用了。例如：

HTML代码:

<div id="app">
    　　<my-component v-on:click.native="clickFun"></my-component>
    </div>

JavaScript代码:

Vue.component('my-component', {
    　　template: `<a href='#'>click me</a>`
    })
    new Vue({
    　　el: '#app',
    　　methods: {
    　　　　clickFun: function(){
    　　　　　　console.log("message: success")
    　　　　}
    　　}
    })

[![2018042414074511.png][]][2018042414074511.png]

[2018042414074510.png]: /images/20210726/6b65502c87054fea9c41684d37c311a4.png
[2018042414074511.png]: /images/20210726/2c3a70e217234e6db87421701a268e3f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

相关 react-native配置decorators-legacy支持修饰符

1. 下载依赖 yarn add @babel/plugin-proposal-decorators //如果是npm 不推荐使用会导致旧包的丢失

傷城~/ 2022年11月20日 09:54/ 0 赞/ 121 阅读

相关 java final修饰符_final修饰符用法详解

final修饰符一直是Java基础知识中非常重要的考点，final关键字可以用来修饰类、变量、方法。final变量不能重新赋值，子类不能覆盖父类的final方法，final类不

布满荆棘的人生/ 2022年11月03日 11:07/ 0 赞/ 184 阅读

相关【Java修饰符】（3）final修饰符详解

final修饰符，可以修饰变量，方法，类 1.final修饰变量被fianl修饰的变量就会变成常量（常量应当大写），一旦赋值不能改变，（可以在初始化时直接赋值

怼烎@/ 2022年07月13日 13:16/ 0 赞/ 215 阅读

相关【Java修饰符】（2）abstract修饰符详解

abstract（抽象）修饰符，可以修饰类和方法 1.abstract修饰类，会使这个类成为一个抽象类，这个类将不能生成对象实例，但可以做为对象变量声明的类型，也就

Love The Way You Lie/ 2022年07月13日 13:15/ 0 赞/ 166 阅读

相关【Java修饰符】（1）static修饰符详解

static 表示静态，它可以修饰属性，方法和代码块。 1.static修饰属性（类变量），那么这个属性就可以用类名.属性名来访问，也就是使这个属性成为本类的

太过爱你忘了你带给我的痛/ 2022年07月13日 13:14/ 0 赞/ 194 阅读

相关 static修饰符详解

static表示“全局”或者“静态”的意思，用来修饰成员变量和成员方法，也可以形成静态static代码块，但是Java语言中没有全局变量的概念。被static修饰的成员变量

矫情吗；*/ 2022年06月02日 09:45/ 0 赞/ 187 阅读

相关 c#中4个访问修饰符和8个声明修饰符详解

4个访问修饰符（是添加到类、结构或成员声明的关键字） Public：公有的，是类型和类型成员的访问修饰符。对其访问没有限制。 Internal：内部的，是类型和类型成

傷城~/ 2022年05月14日 08:35/ 0 赞/ 183 阅读

相关 Native方法 native关键字详解

1，关于native关键字想必读者已经了解过native关键字了。这里笔者就大致囊括一下，被native关键字修饰的方法叫做本地方法，本地方法和其它方法不一样，本

╰+哭是因爲堅強的太久メ/ 2021年11月10日 15:36/ 0 赞/ 362 阅读

相关 VueJS中学习使用Vuex详解

[转载https://segmentfault.com/a/1190000015782272][https_segmentfault.com_a_119000001578227

梦里梦外;/ 2021年09月30日 05:58/ 0 赞/ 374 阅读

相关详解Vue.js中.native修饰符

.native修饰符官方对.native修饰符的解释为：　　有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。例如：

心已赠人/ 2021年09月18日 02:34/ 0 赞/ 288 阅读