1:小泽理解的想法是:首先设置两个组件 SearchSongs与SearchSongLists,然后再data中定义两个变量,一个toggle
一个currentView(表示当前组件)
<template><div class="search"><nav class="searchList-nav" ref="change"><span :class="{isActive: toggle==='Songs'}" @click="handleChangeView('Songs')">歌曲</span><span :class="{isActive: toggle==='SongLists'}" @click="handleChangeView('SongLists')">歌单</span></nav><component :is="currentView"></component></div>
</template><script>
import SearchSongs from '../components/search/SearchSongs';
import SearchSongLists from '../components/search/SearchSongLists'
export default {name: 'Search',components: {SearchSongs,SearchSongLists},data(){return {toggle: 'Songs',currentView: 'SearchSongs'}},methods:{//切换组件handleChangeView(component){this.currentView = 'Search'+component;this.toggle = component;}}}
</script><style lang="scss" scoped>
@import '../assets/css/search.scss';
</style>