.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 - 主要是给自定义的组件添加原生事件。