经过反复测试排查,发现一个比较奇怪的现象:每逢一个列表,如果第一条数据是非外部传值的情况,就会报错.

a 会报错:

<div class="overviewlist">
    <label>总数</label>
    <span>{{infoObj.totalNum}}</span>
</div>

b 不会报错:

<div class="overviewlist">
    <span>{{infoObj.totalNum}}</span>
    <label>总数</label>
</div>

c 会报错:(两个列表之间不影响)

 <div class="cn-left-summary">
        <div class="cn-title">
            <label>{{infoObj.title}}</label>     // 外传值,不报错
        </div>
        <div class="cn-content">
            <div class="overviewlist">
                <label>总数</label>               // 报错
                <span>{{infoObj.totalNum}}</span>
            </div>
            </div>
        </div>
    </div>

啥原因 ?

=========================================================================

以下是原问题:

因为要实现自由拖拽,所以将布局好vue页面转成字符串按支持拖拽的数据结构传给子组件.经指点已经实现了带插值表达式即{{}}的成功解析.但当我尝试传比较复杂的结构时,例如包含子组件的vue模板,就报错了.

问题出在哪里 ?

1.成功编译的vue页面:

转义前:

    <div class="cn-left-summary">
        <div class="cn-title">
            <label>{{infoObj.title}}</label>
        </div>
        <div class="cn-content">
            <div class="overviewlist">
                <label>总数</label>
                <span>{{infoObj.totalNum}}</span>
            </div>
            <div class="overviewlist">
                <label>运行</label>
                <span>{{infoObj.runingNum}}</span>
            </div>
            <div class="overviewlist">
                <label>停止</label>
                <span>{{infoObj.stopNum}}</span>
            </div>
            <div class="overviewlist">
                <label>故障</label>
                <span>{{infoObj.breakdownNum}}</span>
            </div>
            <div ref="myChart" class="myChart">
            </div>
        </div>
    </div>
========================================================
转义后:
'<div class=\'cn-left-summary\'>'+'<div class=\'cn-title\'>'+'<label>{{infoObj.title}}</label>'+'</div>'+'<div class=\'cn-content\'>'+'<div class=\'overviewlist\'>'+'<label>总数</label>'+'<span>{{infoObj.totalNum}}</span>'+'</div>'+' <div class=\'overviewlist\'>'+'<label>运行</label>'+'<span>{{infoObj.runingNum}}</span>'+' </div>'+'<div class=\'overviewlist\'>'+'<label>停止</label>'+'<span>{{infoObj.stopNum}}</span>'+'</div>'+'<div class=\'overviewlist\'>'+'<label>故障</label>'+'<span>{{infoObj.breakdownNum}}</span>'+'</div>'+'<div ref=\'myChart\' class=\'myChart\'>'+'</div>'+'</div>'+'</div>'

2 编译失败的vue页面:

转义前:
            <div class="cn-right-summary">
                <div class="cn-title">
                    <label>集群总览</label>
                </div>
                <div class="cn-content-cluster">
                    <ClusterState />
                    <ClusterCommon ref="clusterCpu"  :infoObj="clusterCpuObj"/>
                    <ClusterCommon ref="ClusterMemory"  :infoObj="clusterMemoryObj"/>
                    <ClusterCommon ref="clusterStorage"  :infoObj="clusterStorageObj"/>
                </div>
            </div>

====================================================
转义后:

'<div class=\'cn-right-summary\'>'+'<div class=\'cn-title\'>'+'<label>集群总览</label>'+'</div>'+'<div class=\'cn-content-cluster\'>'+'<ClusterState />'+'<ClusterCommon ref=\'clusterCpu\'  :infoObj=\'clusterCpuObj\'/>'+'<ClusterCommon ref=\'ClusterMemory\'  :infoObj=\'clusterMemoryObj\'/>'+'<ClusterCommon ref=\'clusterStorage\'  :infoObj=\'clusterStorageObj\'/>'+'</div>'+'</div>'

3 编译vue字符串的vue模板:

<script>
import Vue from 'vue';
export default {
  props: ['template', 'infoObj'],    // template是传进来的字符串模板
  render () {
    const r = Vue.compile(this.template).render;
    return r.call(this);
  },
};
</script>

4 报错信息如下:

[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined"

emm你用到子组件但是你又没有在TemplateRender里声明，Vue怎么去找子组件要加载哪里的代码呢？