首先介绍一下是什么意思:
意思就是当你给一个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 })
这样就能执行了!