vue 中 slot 插槽不能解析{{ }} 插值表达式,不支持?(div,span标签都解析)

Question

描述:
1.在数据testLayout的j中,加入了html字符串,用于在<test-element>组件中,使用v-html="item.j",通过slot插槽传入html字符串,最终循环出html页面结构.
2.在textElement中的<span>标签中,{{infoObj.title}}可以输出正确值,但<slot>接收到的内容输出如下图:(不能解析插值表达式)
问题出在哪里 ?

1.数据结构:

data () {
    return {
        layout: JSON.parse(JSON.stringify(testLayout))
        ... ...
        }}

let testLayout = [
        {"x":0,"y":0,"w":3,"h":6,"i":"0","j":"<h2>222</h2>", resizable: true, draggable: true, static: false},
        {"x":6,"y":0,"w":9,"h":6,"i":"1","j":'<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>'+'<span  ref=\'myChart\' class=\'myChart\'></span>'+'</div>'+'</div>'+'</div>', resizable: null, draggable: null, static: false},

        ]

2 App 组件:
(在<test-element>组件中传入数据clusterObj,在div中使用v-html="item.j",通过slot插槽传入html字符串)

<grid-layout>
    <grid-item v-for="item in layout" :key="item.i"
               :static="item.static"
               :x="item.x"
               :y="item.y"
               :w="item.w"
               :h="item.h"
               :i="item.i"
    >
        <test-element :text="item.i" @removeItem="removeItem($event)" :infoObj="clusterObj">
        <div v-html="item.j"></div>
        </test-element>
    </grid-item>
</grid-layout>

3 gridLayout 结构:

    <div ref="item" class="vue-grid-layout" :style="mergedStyle">
        <slot></slot>
        <grid-item class="vue-grid-placeholder"
                   v-show="isDragging"
                   :x="placeholder.x"
                   :y="placeholder.y"
                   :w="placeholder.w"
                   :h="placeholder.h"
                   :i="placeholder.i"></grid-item>
    </div>

4 gridItem 结构:

    <div ref="item"
         class="vue-grid-item"
         :class="classObj"
         :style="style"
    >
        <slot></slot>
        <span v-if="resizableAndNotStatic" ref="handle" :class="resizableHandleClass"></span>
        <span ref="testChart" class="testChart"></span>
    </div>

5 testElement 结构:

    <div>
        <span class="text">
            {{text}}
        </span>
        <span class="remove" @click="$emit('removeItem', text)">x</span>
        <slot></slot>
        <span>{{infoObj.title}}</span>    // 可以拿到值
    </div>

============== 分隔线 ===============

传入html内容:

'<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>'+'<span  ref=\'myChart\' class=\'myChart\'></span>'+'</div>'+'</div>'+'</div>'

报错截图:

Answer 1

v-html 不会解析模版内容的，只会当作innerHtml替换。

解决：用component的写法替换v-html，走template的编译模版

vue.component(xxx,{ 
    template:"<label>{{yyy}}</label>"
})