当前位置: 首页 > news >正文

前端流行框架Vue3教程:24.动态组件

24.动态组件

有些场景会需要在两个组件间来回切换,比如 Tab 界面

我们准备好A B两个组件ComponentA ComponentA

App.vue代码如下:

<script>
import ComponentA from "./components/ComponentA.vue"
import ComponentB from "./components/ComponentB.vue"export default {data() {// 初始化组件状态,决定首先渲染ComponentAreturn {tabComponent: 'ComponentA'}},components: {ComponentA,ComponentB}
}
</script>
<template><!-- 动态组件,根据data中的tabComponent属性值来决定渲染哪个组件 --><component :is="tabComponent"></component>
</template>

这个时候我们就可以看到页面显示:
在这里插入图片描述

现在我们加个按钮来切换组件:

<script>
// 导入组件A
import ComponentA from "./components/ComponentA.vue"
// 导入组件B
import ComponentB from "./components/ComponentB.vue"export default {data() {// 初始化组件状态,决定首先渲染ComponentAreturn {tabComponent: 'ComponentA'}},components: {// 注册组件A和组件BComponentA,ComponentB}, methods: {// 切换组件的方法changeHandle() {// 根据当前的tabComponent属性值来决定切换到哪个组件this.tabComponent = this.tabComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'}}
}
</script>
<template><!-- 动态组件,根据data中的tabComponent属性值来决定渲染哪个组件 --><component :is="tabComponent"></component><!-- 当用户点击按钮时,调用changeHandle方法来切换组件 --><button @click="changeHandle">切换组件</button>
</template>

此时,我们就可以点击按钮切换组件了

在这里插入图片描述

http://www.dtcms.com/a/210917.html

相关文章:

  • SpringMVC实战:动态时钟
  • Axure RP完全掌握指南:从入门到精通的系统化学习路线
  • NIPS-2013《Distributed PCA and $k$-Means Clustering》
  • 【go】程序启动时发生了什么?为什么选择go语言开发,优势劣势
  • 如何优化 MySQL 存储过程的性能?
  • 历史数据分析——宁波港
  • 【Python】【电网规划】基于经济与可靠性双目标的混合配电系统规划及可靠性评估
  • 主从复制启动
  • 如何设计Agent的记忆系统
  • docker commit除了提交容器成镜像,还能搞什么之修改cmd命令
  • 怎么开发一个网络协议模块(C语言框架)之(二) 数据结构设计
  • 稳固基石 - Prometheus 与 Alertmanager 运维考量
  • STM32中断优先级分组有哪几种?
  • Java中使用Stream API优化for循环
  • ELF格式·链接与加载
  • 网络协议与通信安全
  • Spring MVC深度解析:控制器与视图解析及RESTful API设计最佳实践
  • Linux常用下载资源命令
  • 互联网大厂Java求职面试实录 —— 严肃面试官遇到搞笑水货程序员
  • 动态IP:像变色龙一样自由切换网络身份
  • 深度学习实战:从图像分类到文本生成的完整案例解析
  • python项目和依赖管理工具uv简介
  • 行为型:迭代器模式
  • 为什么Python慢?如何用Numba实现Python百倍加速?
  • CSS入门
  • java基础(继承)
  • C/C++---隐式显式转换
  • Disruptor—2.并发编程相关简介
  • MQTT-排它订阅
  • SQL注入基础