关于v-for和ref的联合使用

原来的组件意思是从list数组中获取数据封装为items，然后组件中通国items.name获得具体数据，，

如果配合了ref使用，

ref，本身是把这个组件放进refs集合key为ref=后面的字符串；

---

这里不能把所有数据封装进一个组件然后放进refs里，，
这里是获取了一个包含了数据的子组件数组，数组里是一个个的子组件，refs获取到的是这些子组件的集合；
使用1：

<template>
  <div class="container">
    <child  @click.native="click" ref="child"></child>
  </div>
</template>
<script>
  import child from '@/components/videoChild'
export default {
  name: 'app',
  components: {
    child
  },
  methods: {
   	click () {
   	    this.$refs.child.pauseVideo()  //过this.$refs.ref.method调用
   	}
  }
    
}
</script>

使用2：

 this.$refs['drawer'].addTypeFrom()

场景3

这里我是在当点击加载当前组件的时候，触发showAll方法，期望。加载组件页面数据，同时调用组件中的组件执行刷新。。[因为初始化生命周期只执行一遍]，后续只能我每次调用就手动刷新了；

但是第一次调用的时候由于是在加载一级组件的时候调用了子组件的刷新方法，但是此时子组件还没初始化造成了找不到dnd的报错，庆幸的是没有影响逻辑，
因为第一次虽然执行主动刷新失败了，但是初始化的时候生命周期执行了加载刷新，而第二次执行的时候由于组件已经加载了，所以可以正常调用刷新方法；
此时生命周期不执行。刚好完整；但是每次第一次点log就报错看了很烦。。所以就引入了如下

等待组件加载完成以后再回来继续执行nextTick里的代码；
这样就解决了，每次都等组件加载完成再去刷新
解决办法3：

this.$nextTick(() => {
  // 如果元素存在就执行
  if (this.$refs['dnd']) {
    this.$refs['dnd'].initData()
  }
})

---

大概出错流程;;
1：一级组件加载的时候，加载了二级组件并渲染，三级组件未渲染
2：点击进入二级组件的时候，同时触发刷新三级组件方法调用，调用三级组件内置刷新方法，此时三级组件未加载（报错）此时三级组件created周期执行，查询到了数据，添加进数据池；
3：再次点击进入时，组件已初始化完成，刷新方方法存在，调用成功，组件由于未销毁，生命周期未执行；