Vue遇到的问题

1.递归组件

  layout-main.vue 父组件里面

  <div class="page-wrap" :id="`module_${currentPage.id}`">
      <LayoutItem :layoutList='layoutList.itemInfos'  @updateSort="getForm"/>
  </div>

　layout-item 子组件里面

 <div v-for="(item, index) in layoutList">
     <!-- 操作等-->
     其它代码
     <!-- 递归组件 -->
     <LayoutItem :layoutList="item.childItem" : v-else-if="item" </LayoutItem>
 </div>
<script>

async updateSort(ev) {
  const list = []
  this.layoutList.forEach((item, index) => {
    list.push({
      id: item.id,
      childItem: []
    })
  })
  if (list.length) {
    await FormApi.saveSort(list)
  }
  // 这行代码在递归嵌套的子组件里面不触发
  this.$emit('updateSort')
},

</script>

问题描述：当子组件触发updateSort方法时，会触发父组件的$emit('updateSort')父组件的方法，但在递归嵌套的子组件里面不执行，所以需要在子组件上面绑定@updateSort方法

<!-- 递归组件 -->
<LayoutItem :layoutList="item.childItem"  @updateSort="handleChildUpdateSort()"></LayoutItem>

2.TypeError: Cannot read property 'tap' of undefined

   错误原因:可能是由于全局webpack 与 本地webpack版本不一致导致。

   解决办法:全局移除 npm uninstall webpack -g，再安装对应版本 或者修改本项目webpack的版本

 

3.vue-loader   Cannot read property 'vue' of undefined

   原因：vue-loader和webpack不兼容

 

4.<component is="getFormType(currentField)"/>组件缓存问题（即数据改变，因为组件缓存未更新）

   组件添加key