vuejs 中的.native原生事件是什么意思？如何使用？

Question

文档：

给组件绑定原生事件

<router-link :to="item.path" :exact="true" :aria-expanded="isExpanded(item) ? 'true' : 'false'"
                     v-if="item.path" @click.native="toggle(index, item)">

请问什么叫做原生事件？为什么在router-link中加.native才能生效，而a标签就不用？

Answer 1

原生就类似于你直接用

$element.addEventListener(click, callback);

绑定事件。

router-link会阻止click事件，你可以试试只用click不用native,事件是不会触发的。
而a标签不会阻止。

Answer 2

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

Answer 3

通俗点，vue 自己定义的标签 <router-link> 还有 组件<my-vue-template/> 没有点击事件，H5不论什么白标签（<div>、）天生就有点击事件。加上 .native就变身H5标签。

Answer 4

不是说父组件跟子组件的交互靠prop向下和emit事件向上嘛。。。所以不加.native怎么知道你这个click是不是自己定义的。是这样理解吧0 0

Answer 5

我是这样理解的，组件包括路由<router-link>都不是h5的原生标签，在用template中的内容替换掉组件时，如果不加.native，默认原来组件上的事件是不会跟过来的，其实和原生JS是一样的：一个div中有一个子div a，此时如果remove这个div，再append一个div b，那么b肯定没有a上面的事件，因为b是一个新的div，它只不过是顶替了a。

Answer 6

一语中的~~