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

Vue独立组件开发-动态组件

文章目录

  • 一、前言
  • 二、实现
  • 三、优化
  • 四、总结
  • 五、最后

一、前言

在开发中,你经常会遇到这么一种情况:根据条件动态地切换某个组件,或动态地选择渲染某个组件。 Vue 提供了另外一个内置的组件 <component>is 特性,可以更好地实现动态组件。

二、实现

首先来看看<component>is 的基本使用,首先定义三个普通组件ABC

<template><div>组件 A</div>
</template>
<script>export default {}
</script><template><div>组件 B</div>
</template>
<script>export default {}
</script><template><div>组件 C</div>
</template>
<script>export default {}
</script>

然后在父组件中导入这 3 个组件,并动态切换:

<template><div><button @click="handleChange('A')">显示 A 组件</button><button @click="handleChange('B')">显示 B 组件</button><button @click="handleChange('C')">显示 C 组件</button><component :is="component"></component></div>
</template>
<script>import componentA from '../components/a.vue';import componentB from '../components/b.vue';import componentC from '../components/c.vue';export default {data () {return {component: componentA}},methods: {handleChange (component) {if (component === 'A') {this.component = componentA;} else if (component === 'B') {this.component = componentB;} else if (component === 'C') {this.component = componentC;}}}}
</script>

这里的 is 动态绑定的是一个组件对象Object),它直接指向 a / b / c 三个组件中的一个。除了直接绑定一个 Object,还可以是一个 String,比如标签名、组件名

下面的这个组件,将原生的按钮 button 进行了封装,如果传入了 prop: to,那它会渲染为一个链接地址 <a> 标签,用于打开这个,如果没有传入 to,就当作普通 button 使用。

<template><component :is="tagName" v-bind="tagProps"><slot></slot></component>
</template><script>
export default {props: {// 链接地址to: {type: String,default: ''},// 链接打开方式,如 _blanktarget: {type: String,default: '_self'}},computed: {// 动态渲染不同的标签tagName() {return this.to === '' ? 'button' : 'a'},// 如果是链接,把这些属性都绑定在 component 上tagProps() {let props = {}if (this.to) {props = {target: this.target,href: this.to}}return props}}
}
</script>

使用组件:

<template>
<div><i-button>普通按钮</i-button><br /><i-button to="https://juejin.cn">链接按钮</i-button><br /><i-button to="https://juejin.cn" target="_blank">新窗口打开链接按钮</i-button>
</div>
</template>
<script>
import iButton from './components/button.vue'export default {
components: { iButton }
}
</script>

最终会渲染出一个原生的 <button> 按钮和两个原生的链接 <a>,且第二个点击会在新窗口中打开链接,如图:

img

i-button 组件中的 <component> is 绑定的就是一个标签名称 button / a,并且通过 v-bind 将一些额外的属性全部绑定到了 <component> 上。

三、优化

再回到第一个 a / b / c 组件切换的示例,如果这类的组件,频繁切换,事实上组件是会重新渲染的。

现在在组件 A 里加两个生命周期 mounted, beforeDestroy。只要切换到 A 组件,mounted 就会触发一次,切换到其它组件,beforeDestroy 也会触发一次,说明组件再重新渲染,这样有可能导致性能问题。

为了避免组件的重复渲染,可以在 <component> 外层套一个 Vue.js 内置的 <keep-alive> 组件,这样组件就会被缓存起来:

<keep-alive><component :is="component"></component>
</keep-alive>

这时,只有 mounted 触发了,如果不离开当前页面,切换到其它组件,beforeDestroy 不会被触发,说明组件已经被缓存了。

四、总结

动态组件广泛应用于灵活渲染组件的场景,根据某种条件来渲染不同的组件,搭配<keep-alive>可以避免组件频繁的创建与销毁。

源码地址可点击【跳转】访问,在线调试代码

五、最后

本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕

相关文章:

Vue独立组件开发-动态组件

文章目录 一、前言二、实现三、优化四、总结五、最后 一、前言 在开发中&#xff0c;你经常会遇到这么一种情况&#xff1a;根据条件动态地切换某个组件&#xff0c;或动态地选择渲染某个组件。 Vue 提供了另外一个内置的组件 <component> 和 is 特性&#xff0c;可以更…...

前端八股文(HTML篇)

目录 1.什么是DOCTYPE,有何用呢&#xff1f; 2.说说对html语义化的理解 3.src和href的区别&#xff1f; 4.title与h1的区别&#xff0c;b与strong的区别&#xff0c;i与em的区别&#xff1f; 5.什么是严格模式与混杂模式&#xff1f; 6.前端页面有哪三层构成&#xff0c;分…...

RivaGAN 水印项目

git地址 https://github.com/DAI-Lab/RivaGAN Dockerfile (/tools下文件为git下的文件) ############################################### # 使用 NVIDIA CUDA 10.0 开发环境作为基础镜像 FROM kaldiasr/kaldi:gpu-ubuntu18.04-cuda10.0 # 设置非交互式安装模式以避免某些命…...

Games101作业5

1.实现Renderer.cpp 中的 Render()&#xff1a;为每个像素生成光线 这里你需要为每个像素生成一条对应的光 线&#xff0c;然后调用函数 castRay() 来得到颜色&#xff0c;最后将颜色存储在帧缓冲区的相 应像素中。 我们要做的就是将屏幕空间下的坐标最后转换到世界空间的坐标…...

Golang解决跨域问题【OPTIONS预处理请求】

Golang解决跨域问题 前置知识&#xff1a;跨域问题产生条件及原因 跨域是是因为浏览器的同源策略限制&#xff0c;是浏览器的一种安全机制&#xff0c;服务端之间是不存在跨域的。 所谓同源指的是两个页面具有相同的协议、主机和端口&#xff0c;三者有任一不相同即会产生跨域…...

复试 || 就业day05(2023.12.31)算法篇

文章目录 前言找不同最长回文串找到所有数组中消失的数字下一个更大元素 I键盘行 前言 &#x1f4ab;你好&#xff0c;我是辰chen&#xff0c;本文旨在准备考研复试或就业 &#x1f4ab;文章题目大多来自于 leetcode&#xff0c;当然也可能来自洛谷或其他刷题平台 &#x1f4ab…...

Spring-4-代理

前面提到过&#xff0c;在Spring中有两种类型的代理&#xff1a;使用JDK Proxy类创建的JDK代理以及使用CGLIB Enhancer类创建的基于CGLIB的代理。 你可能想知道这两种代理之间有什么区别&#xff0c;以及为什么 Spring需要两种代理类型。 在本节中&#xff0c;将详细研究代理…...

设计模式:抽象工厂模式(讲故事易懂)

抽象工厂模式 定义&#xff1a;将有关联关系的系列产品放到一个工厂里&#xff0c;通过该工厂生产一系列产品。 设计模式有三大分类&#xff1a;创建型模式、结构型模式、行为型模式 抽象工厂模式属于创建型模式 上篇 工厂方法模式 提到工厂方法模式中每个工厂只生产一种特定…...

C语言中的Strict Aliasing Rule

文章目录 前言没有警告不代表没有问题目前的应对方法 前言 很久没写了&#xff0c;水一篇。 最近有个代码在gcc 4.8.5上编译失败。编译失败的提示是&#xff1a; error: dereferencing type-punned pointer will break strict-aliasing rules [-Werrorstrict-aliasing]查了下…...

单字符检测模型charnet使用方法,极简

Git链接 安装按照上面的说明&#xff0c;说下使用。 把tools下面的test做了一点修改&#xff0c;可以读取一张图片&#xff0c;把里面的单个字符都检测和识别出来。 然后绘制到屏幕上。 import torch from charnet.modeling.model import CharNet import cv2, os import num…...

Erlang、RabbitMQ下载与安装教程(windows超详细)

目录 安装Erlang 1.首先安装RabbitMQ需要安装Erlang环境 2.点击下载好的.exe文件进行傻瓜式安装,一直next即可 3.配置Erlang环境变量 安装RabbitMQ 1.给出RabbitMQ官网下载址&#xff1a;Installing on Windows — RabbitMQ&#xff0c;找到 2.配置RabbitMQ环境变量&#xff0…...

2023年终总结丨很苦,很酷!

文章目录 个人简介丨了解博主写在前面丨博主介绍年终总结丨博主成就年终总结丨博主想说年终总结丨学习芝士年终总结丨未来展望写在后面丨新年快乐 个人简介丨了解博主 主页地址&#xff1a;https://blog.csdn.net/m0_68111267 荣誉身份 ⭐2022年度CSDN 社区之星 Top6 ⭐2023年…...

鸿蒙 DevEco Studio 3.1 入门指南

本文主要记录开发者入门&#xff0c;从软件安装到项目运行&#xff0c;以及后续的学习 1&#xff0c;配置开发环境 1.1 下载安装包 官网下载链接 点击立即下载找到对应版版本 下载完成&#xff0c;按照提示默认安装即可 1.2 下载SDK及工具链 运行已安装的DevEco Studio&…...

ubuntu多用户环境dockerbug,卸载重装docker流程

之前不小心误操作删除重装docker&#xff0c;结果删除没成功&#xff0c;更没法重装&#xff0c;每次apt install都会报一个docker错误&#xff0c;虽然不影响软件的常规安装&#xff5e;但是现在还是需要装一个完整docker&#xff0c;还是选择删除一下&#xff0c;重点是关闭服…...

微信小程序开发系列-09自定义组件样式特性

微信小程序开发系列目录 《微信小程序开发系列-01创建一个最小的小程序项目》《微信小程序开发系列-02注册小程序》《微信小程序开发系列-03全局配置中的“window”和“tabBar”》《微信小程序开发系列-04获取用户图像和昵称》《微信小程序开发系列-05登录小程序》《微信小程序…...

数据结构 模拟实现LinkedList单向不循环链表

目录 一、链表的简单介绍 二、链表的接口 三、链表的方法实现 &#xff08;1&#xff09;display方法 &#xff08;2&#xff09;size得到单链表的长度方法 &#xff08;3&#xff09;addFirst头插方法 &#xff08;4&#xff09;addLast尾插方法 &#xff08;5&#xf…...

2023-12-24 LeetCode每日一题(收集足够苹果的最小花园周长)

2023-12-24每日一题 一、题目编号 1954. 收集足够苹果的最小花园周长二、题目链接 点击跳转到题目位置 三、题目描述 给你一个用无限二维网格表示的花园&#xff0c;每一个 整数坐标处都有一棵苹果树。整数坐标 (i, j) 处的苹果树有 |i| |j| 个苹果。 你将会买下正中心坐…...

Oracle 19c OCP 1z0 082考场真题解析第17题

考试科目&#xff1a;1Z0-082 考试题量&#xff1a;90 通过分数&#xff1a;60% 考试时间&#xff1a;150min 本文为云贝教育郭一军guoyJoe原创&#xff0c;请尊重知识产权&#xff0c;转发请注明出处&#xff0c;不接受任何抄袭、演绎和未经注明出处的转载。 17. Which three …...

掌握这十几个Python库才是爬虫界的天花板,没有你搞不定的网站!实战案例:Python全网最强电影搜索工具,自动生成播放链接

掌握这十几个Python库才是爬虫界的天花板,没有你搞不定的网站!实战案例:Python全网最强电影搜索工具,自动生成播放链接。 用来爬虫的十几个Python库。只要正确选择适合自己的Python库才能真正提高爬虫效率,到达高效爬虫目的。 1.PyQuery from pyquery import PyQuery as …...

模型 KANO卡诺模型

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。需求分析。 1 卡诺模型的应用 1.1 餐厅需求分析故事 假设你经营一家餐厅&#xff0c;你想了解客户对你的服务质量的满意度。你可以使用卡诺模型来收集客户的反馈&#xff0c;并分析客户的…...

连接器选型五大雷区:从故障数据到设计落地的实战手册

许多硬件团队的失效分析报告显示&#xff0c;连接器引发的现场故障占比长期居高不下&#xff0c;且症状极其隐蔽——间歇性黑屏、信号丢包、热插拔烧毁……这些问题往往在原型测试阶段难以复现&#xff0c;直到批量出货后才集中爆发。本文从电源、高速信号、射频三类典型应用出…...

手把手教你用Python/Node.js快速接入抖音开放平台,实现用户信息获取

Python/Node.js实战&#xff1a;抖音开放平台用户信息获取全流程解析 抖音开放平台为开发者提供了丰富的用户数据接口&#xff0c;但很多技术团队在对接过程中常因OAuth2.0流程复杂而卡在授权环节。本文将用两种主流技术栈演示如何快速完成从授权到获取用户信息的完整闭环。 1.…...

玩转OurBMC第二十六期:OpenBMC固件远程更新原理与实践(下)

栏目介绍&#xff1a;“玩转OurBMC” 是OurBMC社区开创的知识分享类栏目&#xff0c;主要聚焦于社区和BMC全栈技术相关基础知识的分享&#xff0c;全方位涵盖了从理论原理到实践操作的知识传递。OurBMC社区将通过 “玩转OurBMC” 栏目&#xff0c;帮助开发者们深入了解到社区文…...

基于插件化架构的OBS实时音乐信息集成系统技术解析

基于插件化架构的OBS实时音乐信息集成系统技术解析 【免费下载链接】tuna Song information plugin for obs-studio 项目地址: https://gitcode.com/gh_mirrors/tuna1/tuna Tuna是一款面向OBS Studio的高性能插件化实时音乐信息集成系统&#xff0c;采用模块化架构设计&…...

别再手动写Prompt了!Lovable原生AI编排引擎深度解析(附12个已验证行业工作流)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Lovable无代码AI应用构建指南 Lovable 是一款面向业务人员与开发者的低门槛 AI 应用构建平台&#xff0c;它通过可视化编排、预置模型组件和自然语言驱动逻辑&#xff0c;实现无需编写代码即可部署可运…...

基于YOLOv11与Moondream VLM的本地化实时鸟类检测识别系统实践

1. 项目概述&#xff1a;打造一个本地化的实时鸟类观测站 如果你和我一样&#xff0c;喜欢在自家后院、阳台或者喂食器旁观察鸟类&#xff0c;但又不想一直守在窗边&#xff0c;或者希望记录下那些稍纵即逝的访客&#xff0c;那么这个项目可能就是为你准备的。我最近基于 YOLO…...

电子测试安全:示波器浮地测量与隔离变压器应用全解析

1. 项目概述&#xff1a;一次关于测试测量安全的深度探讨又到了周五&#xff0c;对于很多工程师来说&#xff0c;这可能是最想摸鱼但又不得不处理手头棘手问题的一天。想象一下这个场景&#xff1a;你面前摆着一台直接从市电取电的设备&#xff0c;它的某个测试点对地可能有高达…...

终极KMS激活指南:如何一键永久激活Windows和Office

终极KMS激活指南&#xff1a;如何一键永久激活Windows和Office 【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 还在为Windows系统弹出激活警告而烦恼吗&#xff1f;或者Office软件突然变成只读模…...

解锁网络音视频传输:DistroAV插件从零构建高效工作流

解锁网络音视频传输&#xff1a;DistroAV插件从零构建高效工作流 【免费下载链接】obs-ndi DistroAV (formerly OBS-NDI): NDI integration for OBS Studio 项目地址: https://gitcode.com/gh_mirrors/ob/obs-ndi 在现代直播制作和视频协作场景中&#xff0c;跨设备高质…...

从零开始使用Taotoken CLI工具一键配置多款开发环境

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 从零开始使用Taotoken CLI工具一键配置多款开发环境 对于需要接入多个大模型服务的开发者而言&#xff0c;管理不同项目的API密钥、…...