[转].native的作用

编程入门行业动态更新时间:2024-10-24 06:29:07

[转].native的<a href=https://www.elefans.com/category/jswz/34/1768738.html style= 作用"/>

[转].native的作用

.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('点击按钮了')}}})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.srcthis.dialogVisible = true}}}})总结： .native - 主要是给**自定义**的组件添加原生事件。

更多推荐

[转].native的作用

本文发布于:2023-06-13 00:02:07，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/670313.html