博客

1.在当前vue页面导入所拥有的组件

import searchSongs from '../components/search/SearchSongs'
import searchSongLists from '../components/search/SearchSongLists'

2.引入定义：

name: 'search',
  components: {
    searchSongs,
    searchSongLists
  },

3.定义data：

name: 'search',
  components: {
    searchSongs,
    searchSongLists
  },

4.定义切换组件的方法：

methods: {
    // 切换组件
    handleChangeView: function (component) {
      this.currentView = 'search' + component
}
  }

5.切换到特定组件时聚焦（如下图）：

name: 'search',
  components: {
    searchSongs,
    searchSongLists
  },

1.在methods添加

this.toggle = component

2.在span中添加 :

class="{isActive: toggle === 'Songs'} and   :class="{isActive: toggle === 'SongsList'}"

整体代码：

<template>
 <div class="search">
   <nav class="searchList-nav" ref="change">
     <span :class="{isActive: toggle === 'Songs'}" @click="handleChangeView('Songs', 0)">歌曲</span>
     <span :class="{isActive: toggle === 'SongLists'}" @click="handleChangeView('SongLists', 1)">歌单</span>
   </nav>
   <component :is="currentView"></component>
 </div>
</template>

<script>
import searchSongs from '../components/search/SearchSongs'
import searchSongLists from '../components/search/SearchSongLists'
import { mapGetters } from 'vuex'
import mixin from '../mixins'

export default {
 name: 'search',
 mixins: [mixin],
 components: {
   searchSongs,
   searchSongLists
 },
 data () {
   return {
     toggle: 'Songs',
     currentView: 'searchSongs'
   }
 },
 computed: {
   ...mapGetters([
     'searchword'
   ])
 },
 watch: {
   searchword: function () {
     this.getSong()
   }
 },
 methods: {
   // 切换组件
   handleChangeView: function (component) {
     this.currentView = 'search' + component
     this.toggle = component
   }
 }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/search.scss';
</style>