vue实战 ---- 一个简单的音乐搜索网站（start）
vue实战 ---- 一个简单的音乐搜索网站（二）
vue实战 ---- 一个简单的音乐搜索网站（三）
里面涉及的一些图片等静态文件想要可以百度自行下载。。。
涉及的js特效在这个网址有源码：https://www.sojson.com/blog/127.html
1. music.vue代码
<template>
<div>
<searchHeader @getKey='getKey'></searchHeader>
<songHeader v-show='slist'></songHeader>
<searchContent :slist='slist'></searchContent>
</div>
</template>
<script type="text/javascript">
import searchHeader from '@/components/searchHeader'
import songHeader from '@/components/songHeader'
import searchContent from '@/components/searchContent'
export default {
name: 'music',
data(){
return{
slist: 0,
}
},
components: {
searchHeader,
songHeader,
searchContent,
},
methods: {
getKey(data){
// console.info('收到')
this.slist = data
console.info(this.slist)
},
}
}
</script>
<style type="text/css" scoped>
</style>
2. 代码详解
这里开始使用组件，其实music.vue本身也就是组件，这里引用了3个子组件，子组件也可以有自己的子组件。
组件放到components文件夹中，其中：
- HelloWorld.vue：框架搭建时自动生成的，忘记删了...
- searchContent.vue：这个组件是搜索出歌曲时展示的界面
- searchHeader.vue：搜索框，点击搜索就能得到歌曲
- songHeader.vue：就一个挂件，当时脑抽了竟然封装到了组件里...画蛇添足...
代码中有一个getKey()方法，这个方法是用来接收子组件的数据的，其实我明明可以不拆分组件的，这里就是拆分组件的后遗症，搜索歌曲内容的searchHeader.vue这个组件负责的，searchHeader.vue获得数据后要传递给父亲组件music.vue，最后父亲组件还要传递给子组件searchContent.vue去展示数据...
