Question

我已经创建了一个组件，并且在该组件中是一个音频标签。我一直在尝试将mp3的文件路径从其父级传递到组件，但是由于某些原因，音频元素似乎无法成功加载文件。元素最后变成灰色，我没有得到任何错误。我知道属性已成功传递，因为我还传递了轨道的标题，并且在组件中的加载也很好。但是，如果我为源代码硬编码相同的路径，则可以正常工作。没什么大不了的，但是我有11条轨道要做，使用v-for语句会容易得多。

这是我的父组件：

    <template>
    <div container>
        <div class=banner>
            <img src="../assets/CryptoLogo2.svg"/>
        </div>
        <div class="albumcontainer">
          <div class="covercontainer"><img src="../assets/TIADCover(Final).png"/></div>
          <div class="arrow"></div>
          <div class="tracklistcontainer">
            <table class="tracklist">
              <tr class="track" v-for="track in tracks" :key="track.file"  style="padding: 20px;">
                <td>
                  <player :name="track.name" :file="track.file" />
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="bio">
          <p>
          </p>
        </div>
        <div class="footer">
          <div class="footericons">
            <img src="../assets/icons/Facebook.svg" />
            <img src="../assets/icons/Instagram.svg" />
            <img src="../assets/icons/Twitter.svg" />
          </div>
        </div>
  </div>
</template>

<script>
import player from './player'
    export default {
  name: "Album1",
  data() {
    return {
      tracks: [
        {
          name: '5G',
          file: '../assets/tracks/5G.mp3'
        }
      ]
    }
  },
  components:{
    player
  }
};
</script>

然后是带有音频标签的组件：

<template>
    <div>
        <h3>{{ name }}</h3>
        <audio controls controlsList="nodownload">
            <source ref="player" v-bind:src="file" type="audio/mpeg">
        </audio>
    </div>
</template>

<script>
export default{
    name: "player",
    props: {
        name: {
            type: String,
            default: null
        },
        file:{
            type: String,
            default: null
        }
    }
}
</script>

在这里您可以看到我的数据已成功传递。