vue 同一页面采用相同的组件
开发过程中同一个组件import 引入会出现各式各样的问题,具体的可以自己去试试所以采用了require的形式替代就可以了components:{uploadImg:resolve =>require(['../../components/uploadImg/uploadImg.vue'],resolve),uploadImg1:resolve =&...
·
开发过程中同一个组件import 引入会出现各式各样的问题,具体的可以自己去试试
解决1:同一个组件使用时 给一个key值
解决2:所以采用了require的形式替代就可以了
components:{
uploadImg:resolve =>require(['../../components/uploadImg/uploadImg.vue'],resolve),
uploadImg1:resolve =>require(['../../components/uploadImg/uploadImg.vue'],resolve),
uploadFile:resolve =>require(['../../components/uploadImg/uploadFile.vue'],resolve)
},
分析原因
例子,value值会一直存在
<!-- 组件缓存 -->
<template v-if="loginType === 'username'">
<label>用户名</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>邮箱</label>
<input placeholder="Enter your email address">
</template>
<button @click="loginType = loginType === 'username'?'':'username'">切换登陆类型</button>
- 原因:vue渲染机制不是每次都会创建组件得,为了提高它得一个渲染效率,vue采用一个复用机制,如何判断组件是否相同,在vue源码中,是通过tag 和 key 来判断得
function isSameChild (child, oldChild) {
return oldChild.key === child.key && oldChild.tag === child.tag
}
- 所以需要加key值来区分
更多推荐
已为社区贡献23条内容
所有评论(0)