这样写可以:(下方答案有解释)
感谢各位!
this.$refs.testGridItem[2].$children[0].$children[0].$refs.myChart
=========================================
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
- 使用
this.$refs.testElementItem[2].$slots.default.$refs.myChart
报错提示:Cannot read property 'myChart' 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);
},
};
###终于找到了答案了,眼睛泪汪汪的.
是这么写的:
this.$refs.testGridItem[2].$children[0].$children[0].$refs.myChart
两层$children[0], 应该是因为有两层solot.
在testElement组件中使用了TemplateRender 组件进行vue.complie编译,看样子是编译返回后,内容还是注入slot插槽显示啊,这样就能解释通了.