开发过程中同一个组件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值来区分
Logo

前往低代码交流专区

更多推荐