zoukankan      html  css  js  c++  java
  • vue 事件中的 .native

    native是什么?

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

    官网的解释:

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

            通俗点讲:就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加'. native'事件是无法触  发的。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6 </head>
     7 <body>
     8     <div id="app">
     9         <button @click.native="clickFn">按钮</button>
    10     </div>
    11 <script src='vue.js'></script>
    12 <script>
    13 
    14 
    15     new Vue({
    16         el:'#app',
    17         data:{
    18         },
    19         methods:{
    20             clickFn () {
    21               console.log('点击按钮了')
    22           }
    23         }
    24     })
    25 
    26 </script>
    27 </body>
    28 </html>

      此时点击页面中的按钮无任何反应。

    <!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 - 主要是给自定义的组件添加原生事件,可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签,并且该修饰符对普通HTML标签是没有任何作用的。

  • 相关阅读:
    QQ音乐 删除历史登录设备
    mweb发布文章为什么默认TinyMCE编辑器?
    Mac 安装 Homebrew
    uniapp配置scss支持
    PHPRedis教程之geo
    CentOS7通过YUM安装NGINX稳定版本
    CentOS7通过YUM安装MySQL5.6
    更换composer镜像源为阿里云
    使用chattr禁止文件被删除
    centos 7 源码安装 mysql 5.6
  • 原文地址:https://www.cnblogs.com/musicbird/p/10130312.html
Copyright © 2011-2022 走看看