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

文档:

给组件绑定原生事件

<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标签就不用?

回答:

原生就类似于你直接用

$element.addEventListener(click, callback);

绑定事件。

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

回答:

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

回答:

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

回答:

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注