zoukankan      html  css  js  c++  java
  • vue中'. native'修饰符的使用

    官网的解释:

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

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

     1 <template>
     2     <div>
     3         <my-component @click="outClick"></my-component>
     4     </div>
     5 </template>
     6 <script>
     7     import Vue from "vue"
     8 
     9     Vue.component("my-component",{
    10         template:`<el-button type="primary">InnerButton</el-button>`
    11     })
    12 
    13     export default {
    14         methods:{
    15             outClick(){
    16                 alert("this is outer")
    17             }
    18         }
    19     }
    20 </script>

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

    添加修饰符:

     1 <template>
     2     <div>
     3         <my-component @click.native="outClick"></my-component>
     4     </div>
     5 </template>
     6 <script>
     7     import Vue from "vue"
     8 
     9     Vue.component("my-component",{
    10         template:`<el-button type="primary">InnerButton</el-button>`
    11     })
    12 
    13     export default {
    14         methods:{
    15             outClick(){
    16                 alert("this is outer")
    17             }
    18         }
    19     }
    20 </script>

    此时点击就会弹窗:

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

  • 相关阅读:
    Apache工作原理
    Mysql主从复制
    Apache 工作模式
    Codeforces 932E Team Work
    【TJOI2018】教科书般的亵渎
    Codeforces 960G Bandit Blues
    斯特林数&斯特林反演
    【BZOJ4916】神犇与蒟蒻
    【BZOJ3944】Sum
    【BZOJ4805】欧拉函数求和
  • 原文地址:https://www.cnblogs.com/smile-fanyin/p/14649439.html
Copyright © 2011-2022 走看看