Vue 中 native 的作用及使用

1,033 阅读1分钟

当我们在写代码的时候,碰到那种封装了一个组件,但是这事件触发不了的时候,可以看看

例如点击事件 @click 下面的例子是封装了一个 button 组件,的html代码,封装组件名叫 <Button/>

<templace>
    <button> 按钮 </button>
</templace>

当在使用这个组件的时候,想弄个点击事件时

<Button @click="add()"/>

会发现这个点击事件会没有效果,因为他触发的是封装button这个组件里面的button,而不是这个封装的组件。

当遇到这种情况时,可以在点击事件后面加 ,.native 装饰器

<Button @click.native="add()"/>

就可以触发点击事件了

当然也还有另外一种方法,跟.native 不一样的,当外部用点击事件时,可以在封装组件里面这样写

<templace>
    <button @click="$emit('click',$event)"> 按钮 </button>
</templace>

这样就是把接收触发在自己身上的事件,传给外部去,同样可以触发点击事件的效果