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去展示数据...