zoukankan      html  css  js  c++  java
  • vue.js实战——.native修饰符

    https://blog.csdn.net/qq_29468573/article/details/80771625

    除了用v-on在组件上监听自定义事件外,也可以监听DOM事件,这时可以用.native修饰符表示监听的是一个原生事件,监听的是该组件的根元素,示例如下:

            <my-component v-on:click="handleClick"></my-component>  //不会触发
          <my-component v-on:click.native="handleClick"></my-component>  //触发handleClick
    <body>
        <div id="app">
            <my-component @click="outClick"></my-component>        <!-- 点击无弹框,事件绑定失败 -->
            <my-component @click.native="outClick"></my-component>    <!--点击有弹框,事件绑定成功--->
        </div>
        <script>
            Vue.component('my-component',{
                template:'<button>点击事件</button>'
            })
           var app=new Vue({
               el:'#app',
               methods:{
                   outClick(){
                       alert('this is outer');
                   }
               }
           })
        </script>
    </body>

    总结:

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

      可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签,并且该修饰符对普通HTML标签是没有任何作用的。

  • 相关阅读:
    setlocale
    c++的 程序实体 作用域 名空间 变量生存期概念理解
    本人的Ubuntu 10.04配置清单
    hadoopStreamming 编程 Angels
    级联 mapreduce (Cascading Mapreduce) Angels
    委托
    OPC和XML/SOAP/Web Services
    实例管理2(会话服务)
    实例管理3()
    操作(Operation)
  • 原文地址:https://www.cnblogs.com/em2464/p/10419439.html
Copyright © 2011-2022 走看看