vue父组件中使用ref调用子组件中的方法

标签（空格分隔）： vue

• 情况一：一般情况下，

<k-media-video ref="kmediaMonitor"></k-media-video>

绑定ref="kmediaMonitor"
然后，js中直接调用就可以了

this.$refs['kmediaMonitor'].initPlayer();
//或者this.$refs.initPlayer();

• 情况二：但是有的是for循环中需要调用子界面的方法

当ref和v-for一起使用的时候，你得到的ref将会是一个包含了对应数据源的这些子组件的数组。
$ref只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”————你应该避免在模板或计算属性中访问$ref

<div  v-for="(item, index) in kmediaList" :key="index">
<k-media-video :index="index" :websocketUrl="item.url" :devId="item.id" ref="kmediaMonitor"></k-media-video>
</div>

绑定ref="kmediaMonitor"

js中

this.$nextTick(() => {
    this.$refs['kmediaMonitor'].forEach((item) => {
                  item.initPlayer(); //initPlayer是子组件的方法
                  console.log('调用视频播放页面的视频去播放了---------------------------------');
        })  
});