vue 事件中的 .native

来源：互联网发布：大数据魔方编辑：程序博客网时间：2024/06/06 20:33

.native是什么？

.native - 监听组件根元素的原生事件。
主要是给自定义的组件添加原生事件。

例子
给普通的标签加事件，然后加native是无效的

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div id="app">        <button @click.native="clickFn">按钮</button>    </div><script src='vue.js'></script><script>    new Vue({        el:'#app',        data:{        },        methods:{            clickFn () {              console.log('点击按钮了')          }        }    })</script></body></html>

onclick事件不会触发！

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div id="app">        <card @click.native="clickFn">按钮</card>    </div><script src='vue.js'></script><script>    Vue.component('card',{        template:'<p>这是card组件<button>按钮</button></p>'    })    new Vue({        el:'#app',        data:{            state:false        },        methods:{            clickFn (e) {              console.log(e)  //打印出MouseEvent对象              if (e.target.nodeName === 'IMG') {  // 可以对点击的target标签进行判断                this.dialogImageUrl = file.target.src                this.dialogVisible = true              }          }        }    })</script></body></html>

总结： .native - 主要是给自定义的组件添加原生事件。

阅读全文

'); })();