完整版vue 如何获取 compile 编译后的 ref ?

1.问题: 如何拿到testLayout第二条数据中,键值为j的值中ref='myChart

2.能拿到gridItem中的ref:

this.$refs.testElementItem[1].$refs.testChart

3.使用了TemplateRender组件Vue.compile编译html字符串

4.尝试在testElement引用TemplateRender时,加入ref="testRender",然后使用 this.$refs.testElementItem[2].$refs.testRender.$refs.myChart, 定位失败, 提示Cannot read property '$refs' of undefined

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>'+'<span  ref=\'myChart\' class=\'myChart\'></span>'+'</div>', resizable: null, draggable: null, static: false},

        ]

2 App 组件:
(在<test-element>组件中使用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"
               
               ref="testElementItem"
    >
        <test-element :text="item.j" @removeItem="removeItem($event)" :infoObj="clusterObj">
        <!-- <div v-html="item.i"></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>
      <TemplateRender
      :template="text"
      :infoObj="infoObj"
      ref="testRender"
    />
    </div>

6 TemplateRender 组件:

import Vue from 'vue';
export default {
  props: ['template', 'infoObj'],
  render () {
    const r = Vue.compile(this.template).render;
    return r.call(this);
  },
};