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>

Vue中动态切换组件相关推荐

记录vue中component切换组件时销毁定时器问题
问题描述:有A.B两个子组件,通过component进行切换,子组件中有定时器,当切换组件时需要把定时器给注销掉. 1.通过VUE组件生命周期进行删除定时器 2.使用this.$once来监听定时器 ...
vue中动态添加组件
效果: 代码: <template><div><div v-for="(item,index) in lst"><h4>{{item ...
vue中动态渲染组件
https://blog.csdn.net/qq_42345237/article/details/98348889 https://www.cnblogs.com/moqiutao/p/114403 ...
vue中tab切换前端实现_vue实现Tab切换功能
在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换.Tab动态组件切换.通过v-show设置Tab显示隐藏.每种方法实现起来其实 ...
VUE中动态改变字体大小
VUE中动态改变字体大小父组件将自己的数据传递送给子组件展示,子组件监听click操作,emit发送出去,父组件监听通过emit发送的信息,改变控制字体大小的postFontSize,通过style ...
springboot 中动态切换数据源（多数据源应用设计）
目录原理图数据库项目结构启动类 entity controller service mapper 配置文件线程上下文 (DataSourceHolder) 动态数据源 DynamicData ...
vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48 来源:亿速云阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
vue中写svg组件svg图片加载不出来
vue中写svg组件svg图片加载不出来结构首先要安装3个插件:svg-sprite-loader,svgo,svgo-loader npm install svg-sprite-loader - ...
vue中动态引入图片为什么要是require，你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

Vue中动态切换组件

1：小泽理解的想法是：首先设置两个组件 SearchSongs与SearchSongLists，然后再data中定义两个变量，一个toggle

一个currentView（表示当前组件）

Vue中动态切换组件相关推荐

最新文章

热门文章