Vue小记5

最近程序中需要实现在主界面中引用多个子界面的情况，出现一些问题，经过多次调试，得以解决，特记录再次。

界面原代码：
html部分：

<div class="accept-container">
    <a-tabs default-active-key="1" tab-position="left" @change="callback">
        <a-tab-pane key="1" tab="基础设置">
           <BasicInfo ref="BasicInfo" :parentObj="this" :loading="loading" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="企业认证" force-render>
        	<Authentication ref="authentication" :parentObj="this" :loading="loading" />
        </a-tab-pane>
        <a-tab-pane key="3" tab="申请列表" >
          <ApplicationList ref="applicationList" :parentObj="this" :loading="loading" />
        </a-tab-pane>
     </a-tabs>
</div>

JavaScript代码部分：

<script>
import BasicInfo from './BasicInfo'
import Authentication from './Authentication'
import ApplicationList from './ApplicationList'

export default {
  components: {
    BasicInfo,
    Authentication,
    ApplicationList,
  },
  data() {
    return {
      userId: '', //用户id
    }
  },

  created() {  },
  methods: {
    // tab切换
    callback(val) {
      switch (val) {
        case '1': //基础设置
          this.$refs.BasicInfo.getUserInfo(this.userId)
          break
        case '2': //企业认证
          this.$refs.authentication.getEnterpriseInfo(this.userId)
          break
        case '3': //申请列表
          this.$refs.applicationList.getApplyList(this.userId)
          break
      }
    },
  },
}
</script>

以上代码片段界面操作情况如下：

界面进基础信息、企业认证、申请列表三项。当点击基础信息、企业认证是右侧显示页部分均可获取正常数据，但当点击申请列表时数据一直在加载不显示数据，并且有报错信息如下图所示：

this.$refs.applicationList.getApplyList(this.userId) 为在父页面调用子页面中的方法，但报错信息中显示：Cannot read property ‘getApplyList’ of undefined（无法读取未定义的属性‘getApplyList’）。

后经过仔细对照，发现问题所在：
html代码片段中：
企业认证部分 a-tab-pane 标签中添加了 force-render属性，而申请列表部分未添加该属性，添加属性 force-render 后页面操作恢复正常。

即代码片段为：

<div class="accept-container">
    <a-tabs default-active-key="1" tab-position="left" @change="callback">
        <a-tab-pane key="1" tab="基础设置">
          <BasicInfo ref="BasicInfo" :parentObj="this" :loading="loading" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="企业认证" force-render>
        	<Authentication ref="authentication" :parentObj="this" :loading="loading" />
        </a-tab-pane>
        <a-tab-pane key="3" tab="申请列表" force-render>
          <ApplicationList ref="applicationList" :parentObj="this" :loading="loading" />
        </a-tab-pane>
    </a-tabs>
</div>

Vue小白一枚，若有大神路过，发现不对之处欢迎留言指导！！