vue-cli开发时ref、$refs的关系

最近在用vue-cli做一个个人网站，准备开发一个音乐播放器，使用的aplayer。在使用aplayer实例的时候发现无法获取。百度了半天，都说只要使用this.$refs.aplayer就能获取到实例，其实不然，我们需要在使用组件的时候先将组件注册到$refs。

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例

注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册

 

<template>
    <div class="zbox-player" @mouseenter="maxPlayer">
      <aplayer
        :class="{ 'aplayer-narrow': ismini }"
        :autoplay="player.autoPlay"
        :fixed="isFixde"
        :mini="ismini"
        ref="aplayer"
        :lrcType="player.lrcType"
        :audio="player.nowSong"
      ></aplayer>
    </div>
</template>
...
this.$refs.aplayer.play();

如果上面aplayer组件不添加ref="aplayer"属性的话，在下面是无法获取到aplayer的

来源：CSDN

作者：天下寒

链接：https://blog.csdn.net/zh5220909/article/details/103626553