发现奇怪现象,在底部说明.

顺晟科技：

1 结构就是原来的结构:

我是在使用echarts, 需要这样找到目标ref进行设置:

3 子组件ClusterCommon:

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

无论无何我都不建议你再用了 Vue.compile() 了！我看了许多你以前的提问，知道你用它只是为了给 vue-grid-layout 渲染子组件而已，事实上对于这个目的完全可以用动态组件 <component :is=""/> 实现，这更简单而且可以让你在这个目的上少拐很多弯。

之前学习Angular，依赖注入经常被提到．看过一些vue教程，涉及的不多．道理应该是一样的．

b 不会报错:

我并不建议你从一个结构不确定的子树取ref，这样过于繁琐，而且缺乏有效的可维护性。显而易见的是，一旦组件的树状结构变更，你还需要对引用链进行同步更改。

a 会报错:

对于数据你可以用 vue 的依赖注入（inject provide），注入给子组件们。

2 编译失败的vue页面(有子组件嵌套):

你可以先说说获取ref的目的是什么呢？我想也许还有更简单直接的方法可以达成同样目的。目前看起来似乎只是为了跨组件通信？

当前做的项目工程量很小. 我现在是把 echarts 数据放在了父组件里.

原来的方法也能找到ref，问题出在我只放了２条数据．低级错误．

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

啥原因 ?

4 报错信息如下:

2 动态传进去其中一个组件,即"item.j"的内容:

是把 echarts 的数据,放在子组件(也就是 echarts 图表)里意思吗 ?

例如:let testEcharts = echarts.init(this.$refs.testGridItem[2].$refs.dyCom.$refs.clusterCpu.$refs.clustercommon);

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

testEcharts.setOption(this.optionCluster);

如何获取动态子组件 ClusterCommon 的 ref ?尝试了.$slots.default[0] , $children[0] 都找不到啊

奇怪现象描述:

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

对于 echarts 的使用，更通常且合理的做法是将它封装在图表组件内，图表组件在 mounted 时再调用 echarts.init();

感谢指点！

1.成功编译的vue页面:

如果这样的话,方案1: 从这个 echarts 子组件获取图表数据;方案2: 要么把数据从父组件传过来;方案3: 用vuex ?