搜索功能

1.搜索框组件：

<template>
   <div class="search-list" >
          <el-input  v-model="query"  :placeholder="placeholder"></el-input>
          <span  v-show="query"   @click.prevent="clear" class="el-icon-error"></span>
   </div>
</template>

<script>
    export default {
        name: "search-list",
      props:{
        placeholder:{
          type:String,
          default:'搜索歌曲、歌手'
        }
      },
      data(){
          return {
            query:'',
          }
      },
      methods:{
        clear(){
          console.log('qu')
          this.query=''
        },
        setQuery(query){
          console.log(query)
          this.query = query
        }
      },
      created(){
          this.$watch('query',(newQuery)=>{//当搜索值发生变化的时候，将搜索值传递出去
            this.$emit('query',newQuery )
          })
      }
    }
</script>

2.搜索页面组件：

<template>
    <div class="search">
      <search-list  ref="searchBox"   @query="onQueryChange"></search-list>
      <div class="hot-search">
        <div class="hot-title">热门搜索</div>
        <ul class="hot-list">
            <li    @click.stop.prevent="addQuery(item.k)"  class="host-span" v-for="(item) of  hotKey ">{{item.k}}</li>
        </ul>
      </div>
      <div class="search-list-box">
        <!--suggest需要传入query-->
        <suggest  :query="query"></suggest>
      </div>
    </div>
</template>

<script>
  import SearchList from '@/base/search-list/search-list.vue'
  import {getHotKey} from "../../api/search";
  import {ERR_OK} from '@/api/config'
  import Suggest from '@/components/suggest/suggest'

  export default {
        name: "search",
      components:{
        SearchList,
        Suggest,
      },
    data(){
      return {
        hotKey: [],
        query: '',//是根据search-list里面的监听的query来变化的；所以在这里面监听search-list派发过来的query时间      }
      }
    },
      created() {
        this._getHotKey()
      },
      methods:{
        onQueryChange(query){
          this.query = query
        },
        _getHotKey() {
          getHotKey().then((res) => {
            if (res.code === ERR_OK) {
              this.hotKey = res.data.hotkey.slice(0, 10)
              console.log(this.hotKey)
            }
          })
        },
        addQuery(query){
          this.$refs.searchBox.setQuery(query)
        }
      }

    }
</script>

3.搜索列表显示组件

<template>
    <div class="suggest">
      <ul>
        <li  v-for="(item,index) of result">
          <div class="icon">
            <i :class="getIconCls"></i>
          </div>
          <div class="name">
            <p class="text"  v-html="getDisplayName(item)"></p>
          </div>
          </li>
      </ul>
    </div>
</template>

<script>
  import {search} from '@/api/search'
  import {ERR_OK} from '@/api/config'
  import {filterSinger} from '@/common/js/song'
  const TYPE_SINGER = 'singer'//定义常量

  export default {
        name: "suggest",
      data(){
        return {
          result:[],
          page:1,//第几页
        }
      },
      props:{
        query:{
          type:String,
          defauult:''
        },
        showSinger:{//是否显示歌手
          type:Boolean,
          default:true
        }
      },
      watch:{
          query(){//当搜素关键词发生变化时候调用search方法；
            search(this.query,this.page,this.showSinger).then((res)=>{//song代表歌曲，zhida代表歌手信息；前面的icon不同；p代表页码数；catzhida:要不要检索歌手；
                if(res.code === ERR_OK){
                  console.log(res)
                  this.result = this._genResult(res)//得到的搜索列表
                }
            })
        }
      },
      methods:{
          getIconCls(item){//显示图标
             if(item.type === TYPE_SINGER){
                return 'icon-mine'
             }else{
               return "icon-music"
             }
          },
          getDisplayName(item){//显示名字
          if(item.type === TYPE_SINGER){
            return item.singername
          }else{
            return `${item.songname} - ${filterSinger(item.singer)}`
          }
        },
           _genResult(data) {
          let ret = []
          if (data.zhida && data.zhida.singerid) {//歌手push到返回值李
            ret.push({...data.zhida, ...{type: TYPE_SINGER}})//用来区分后面列表显示是歌手；将两个添加到一个对象上
          }
          if (data.song) {
            //ret =
            ret = ret.concat(this._normalizeSongs(data.song.list))
          }
          return ret
        },
           _normalizeSongs(list) {
          let ret = []
          list.forEach((musicData) => {
            if (musicData.songid && musicData.albummid) {
              ret.push(createSong(musicData))
            }
          })
          return ret
        },
      }
    }
</script>

搜索逻辑：

1.suggest.vue是根据搜索关键词来从后台请求数据并展示数据，因此需要props搜索词query;

2.suggest.vue监听搜索词query，当query发生变化的时候发送search请求，并渲染列表

3.父组件search.vue将:query="query"，把词传递过来。

4.搜索框search-list.vue监听query并派发query事件，并把query传递出去；

5.search.vue接听query事件，并将收到的query参数传递给suggest.vue。