Vue-native绑定原生事件

首先介绍一下是什么意思：

意思就是当你给一个vue组件绑定事件时候，要加上native！如果是普通的html元素！就不需要

<div id = "app">
   <my-component @click="i_said"></my-component>
</div>

Vue.component('my-component', {
  template: "<button>点击我</button>",
})

new Vue({
  el:"#app",
  methods:{
    i_said(){
       alert("Hello world");
    }
  }
})

这样在组件上添加事件是没有效果的,如果是普通的html标签当然没问题比如

<div id = "app">
   <button @click="i_said">点击我</button>
</div>

new Vue({
  el:"#app",
  methods:{
    i_said(){
       alert("Hello world");
    }
  }
})

这样肯定没问题,

组件上添加自定义事件也没问题比如

<div id = "app">
    <my-component @say="i_said"></my-component>
</div>

Vue.component("my-component", {
   template: "<button @click='greet'>点击我</button>",
   methods:{
     greet(){
        this.$emit("say", "Hello world");
     }
   }
})

new Vue({
  el:"#app",
  methods:{
    i_said(message){
       alert(message)
    }
  }
})

这样也完全没有问题也直接弹出“Hello world”

 

但是组件要添加原生事件需要加上.native 才会生效

 1 <div id = "app">
 2    <my-component @click.native="i_said"></my-component>
 3 </div>
 4 
 5 Vue.component('my-component', {
 6   template: "<button>点击我</button>",
 7 })
 8 
 9 new Vue({
10   el:"#app",
11   methods:{
12     i_said(){
13        alert("Hello world");
14     }
15   }
16 })

 

这样就能执行了！

 

转载于:https://www.cnblogs.com/qjuly/p/8881982.html