vue动态组件

已于 2022-11-14 10:04:04 修改
阅读量1.1k 收藏 1
点赞数
文章标签： vue.js
于 2022-03-19 19:02:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Noctis99/article/details/123600246
版权

我们在使用 is attribute 来切换不同的组件：
is接受两种数据，一种字符串组件名
另外一个就是组件的对象，vue3中直接传递组件的对象给他，就不需要注册,或多加一个script使用 defineComponent注册组件就能传字符串组件名

若icon：'xxx'则不会渲染因为动态组件的是执行后才知道的，编译的时候不知道

shallowRef可以避免控制台警告

element

vue2中先注册再使用

lunaʚゞɞ
关注
Vue动态组件用法及使用场景
全栈弄潮儿
10-26 2503
Vue允许你使用动态组件（Dynamic Components）来根据运行时的数据动态切换渲染不同的组件。这在构建可扩展和灵活的用户界面时非常有用。你可以使用元素来实现动态组件，结合:is属性来指定要渲染的组件。
vue 动态组件
LPL0158的博客
10-05 197
动态组件 有的时候，我们需要在多个不同的组件之间进行切换。虽然我们可以通过 v-if 来处理，但是会比较麻烦，vue 提供了一个更方便的方式来处理这种情况 component 组件 component 是 vue 内置的一个组件，它提供一个 is 属性用来动态渲染不同的组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport
Vue动态组件
热门推荐
yuan
04-18 1万+
等疫情结束了，要开始爬爬山、看看海，做些不会后悔的事情 一、概念 1. 示例 组件是可复用的 Vue 实例，且带有一个名字，这里实现一个最简单的组件： 父组件： <template> <div> <h1>Father</h1> <!-- 调用子组件 --> <Son /> </div> </template> <script> // 引入子组件模块 impor..
Vue组件：动态组件、缓存组件、异步组件
最新发布
pan_junbiao的博客
09-10 723
Vue.js 提供了对动态组件的支持。在使用动态组件时，多个组件使用同一挂载点，根据条件在不同组件之间进行动态切换。动态组件通过使用 Vue.js 中的元素，动态绑定到该元素的 is 属性，根据 is 属性的值来判断使用哪个组件。在多个组件之间进行切换的时候，有时需要保持这些组件的状态，将切换后的状态保留在内存中，以避免重复渲染。为了解决这个问题，可以用一个 元素将动态组件包含起来。
vue动态组件实现选项卡切换效果
12-29
本文实例为大家分享了vue动态组件实现选项卡切换的具体代码，供大家参考，具体内容如下 导航按钮： <p click=a><router to='/collectnewcars'>新车</router></p> <p click=a><router to='/...
Vue动态组件和异步组件原理详解
01-19
然而，在官方资料中，并没有涉及到真正的“动态异步”组件，经过大量的时间研究和技术分析，我们给出目前比较合理的技术实现方式，并分析一下vue动态异步组件的原理 动态组件 & 异步组件的存在，使得我们更方便地...
VueJS 之动态组件
两个月亮
02-03 5523
在组件的动态切换过程中，存在组件的生成与销毁过程。在切换组件后，原组件将被销毁。再次切换为原组件时，由于组件经历了再生成的过程，组件中的数据都将处于初始状态。在实现组件的动态切换功能时，你可能会想保持这些组件的状态，以避免反复重新渲染导致的性能问题。我们可以使用 keep-alive 元素达成该目的。
vue动态组件-根据数据展示特定组件
weixin_30316097的博客
03-01 973
vue中有个内置组件component，利用它可以实现动态组件，在某些业务场景下可以替换路由 假设有以下三个组件： 　　com1、com2、com3 有一个外层路/coms中代码如下 　　 1 <template> 2 <div class="container"> 3 <component :is="activeIte...
Vue中的动态组件
weixin_44090040的博客
07-13 746
1，定义： 动态组件就是将几个组件放在一个挂载点下，这个挂载点就是标签，其需要绑定is属性，属性值为父组件中的变量，变量对应的值为要挂载的组件的组件名，然后根据父组件里某个变量来动态显示哪个，也可以都不显示， 2，使用： <component>元素是vue 里面的一个内置组件。在里面使用 v-bind: is，可以实现动态组件的效果。 <component :is="currentComponent"></component> 3，例子： <!-- *
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值