function sameVnode (a, b) { return ( a.key === b.key && ( ( a.tag === b.tag && a.isComment === b.isComment && isDef(a.data) === isDef(b.data) && sameInputType(a, b) ) || ( isTrue(a.isAsyncPlaceholder) && a.asyncFactory === b.asyncFactory && isUndef(b.asyncFactory.error) ) ) ) }
也就是对diff来说，所谓相同的第一判定原则是key。
key也是react引入diff时添加的一个属性，用来判断前后vdom树上是否为统一元素（注意是同级关系上），所以我们只需要在代码上加key，就可以避免这个问题
<Button key="1" v-if="disabled" @clickTest="handleClick">可点击</Button> <Button key="2" v-else>不可点击</Button>
这样，我们在点击按钮时，就不会再出弹框了。
key的作用很广泛，当我们在遍历数组生成dom时，添加一个可确定的唯一id（注意不应该用数组索引），会优化我们的比对效率以及更少的操作dom。我们也会在某个div上添加key以确保他不会因为兄弟元素的变动而被重新渲染（这类div一般会被绑定react或vue以外的事件或动作，如在这个div中生成了一个canvas等）。
那么除了在组件上加这种不必要key值以外，还有别的方法解决吗？
有的，这里有一种很反vue但是类react的方式，就是把回调事件通过props的方式传递，向下面着这样，
<Button v-if="disabled" :clickTest="handleClick">可点击</Button> <Button v-else>不可点击</Button> props: { 'clickTest': { type: Function } }, methods: { handleClick() { //this.$emit('clickTest') this.clickTest && this.clickTest() } }
虽然vue给了我们更方便的事件传递的方式，但props里是允许我们去传递任何类型的，我的期望是在真实的dom上或者在公共组件的入口处以外的地方，都是通过props的方式来传递结果的。虽然这种方式很不vue，而且也享受不到v-on给我们带来的遍历，但是这样确实可以减少不必要的麻烦。
当然既然用了vue，更好的利用vue给我们带来的便利也很重要，所以对于这种很少会出现的麻烦，我们有一个预期，并可以快速定位并修复问题，就可以了。
总结
以上所述是小编给大家介绍的vue组件间事件传递，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: