首页 > 其他分享 >vue - 动态组件(:is在组件中的使用)

vue - 动态组件(:is在组件中的使用)

时间:2023-07-07 10:47:30浏览次数:39  
标签:vue attribute 场景 切换 使用 组件 动态

使用场景:

有些场景会需要在两个组件间来回切换,比如 Tab 界面:
我们可以通过 Vue 的 <component> 元素和特殊的 is attribute 实现的:如

<!-- currentTab 改变时组件也改变 -->
<component :is="currentTab"></component>

在上面的例子中,被传给:is的值可以是以下几种:

  • 被注册的组件名
  • 导入的组件对象
    你也可以使用 is attribute 来创建一般的 HTML 元素。

当使用 <component :is="..."> 来在多个组件间作切换时,被切换掉的组件会被卸载。我们可以通过 <KeepAlive> 组件强制被切换掉的组件仍然保持“存活”的状态。

标签:vue,attribute,场景,切换,使用,组件,动态
From: https://www.cnblogs.com/axingya/p/17534177.html

相关文章

  • vue3--setUp以及ref的使用
    <template><h1>计数统计:{{countRef}}</h1><h2><button@click="inCreate">数量加1</button></h2><h2><button@click="inDelete">数量-1</button></h2></template><!--......
  • vue--计算属性
    在Vue.js中,计算属性(ComputedProperty)是一种特殊的属性,它基于现有的数据计算出一个新的值,并且会根据其依赖的数据进行自动更新。计算属性主要用于将复杂的逻辑和变量计算封装为属性,以便在模板中直接使用。以下是使用计算属性的一般步骤:1.在Vue实例的computed对象中定义计算......
  • vue 自定义指令实现overflow-tooltip
    利用elementui el-tooltip组件实现1.创建overflow-tooltip指令importVuefrom'vue'/*eslint-disable*/functiongetStyle(obj,attr){if(obj.currentStyle){returnobj.currentStyle[attr];}else{returngetComputedStyle(obj)[attr];......
  • vue项目打包,配置nginx反向代理
    1.将Vue项目打包在终端中执行npmrunbuild打包完成后可以在项目的dist目录看到index.html(如下图)。将此目录的所有文件放到nginx服务器即可访问。 2.下载nginx并放到服务器上http://nginx.org/en/download.html通过点击上面的链接,下载对应于自己系统的nginx,这里使用Windo......
  • vue3 ref全家桶(小满zs vue3 笔记六)
    tip1:vue3无响应式数据(控制台数据已经变化,但是页面无刷新)<template><div>认识Ref全家桶</div><div>{{message}}</div><button@click="change">改变</button></template><scriptsetuplang="ts">letmessage:s......
  • 手把手教你自定义自己SpringBoot Starter组件源码剖析
    我们知道SpringBootStarter也就是启动器。是SpringBoot组件化的一大优点。基于这个思想,基于这个思想SpringBoot才变得非常强大,官方给我们提供很多开箱即用的启动器。SpringBootStarter是SpringBoot的一个重要特性,它有以下优点:依赖管理:Starter自动处理项目的依赖关系,......
  • 前端Vue自定义精美底部操作栏导航栏工具栏 可用于电商购物车底部导航
    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率......
  • 前端Vue组件之仿京东拼多多领取优惠券弹出框popup 可用于电商商品详情领券场景使用
    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率......
  • UniApp组件库推荐:提升开发效率的利器
    在移动应用开发中,组件库是开发者们的利器之一。它们提供了一系列预先构建好的UI组件和功能模块,可以显著加快应用程序的开发速度。而UniApp作为一个跨平台的开发框架,也有着丰富的组件库可供选择。在本篇博客中,我将向大家推荐几个高效实用的UniApp组件库,帮助开发者们提升开发效率。uV......
  • Vue(十):监视属性——watch
    1.监视属性的基本用法<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>天气案例-监视属性</title><scripttype="text/javascript"src="../js/vue.js"></script>......