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的