vue前端框架--动态切换currentView组件方法

本文详细介绍了在Vue前端项目中如何动态切换currentView组件,包括导入组件、定义data、设置切换方法以及实现组件切换时的焦点处理。通过实例代码,展示了在methods中添加方法以及在模板中应用的步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值