<template>
<div id="app">
<music-list :music-list="musicList" @play="playMusic"></music-list>
</div>
</template>
<script>
import MusicList from './components/MusicList.vue';
export default {
name: 'App',
components: {
MusicList
},
data() {
return {
musicList: [
{ id: 1, title: 'Music 1', artist: 'Artist 1', url: 'path/to/music/1' },
{ id: 2, title: 'Music 2', artist: 'Artist 2', url: 'path/to/music/2' },
// ...更多音乐
],
currentMusic: null
};
},
methods: {
playMusic(music) {
this.currentMusic = music;
// 使用 Audio 对象播放音乐，例如：
const audio = new Audio(music.url);
audio.play();
}
}
};
</script>
<style>
/* 在这里添加样式 */
</style>在这个简单的例子中，我们定义了一个名为 App 的 Vue 根组件，它包含一个 music-list 子组件，该子组件用于显示音乐列表。音乐列表数据存储在 musicList 数组中，每个音乐信息对象包含 id、title、artist 和 url 属性。playMusic 方法会在用户点击播放按钮时触发，更新当前播放的音乐，并播放选定的音乐文件。这个例子展示了如何构建一个简单的音乐播放器界面，并处理用户与界面的交互。