vue .native

裴弘
2023-12-01

.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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

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

 类似资料:

相关阅读

相关文章

相关问答