vue3动态组件,涉及了＜component :is=“...“＞的使用

最新推荐文章于 2024-05-11 14:22:46 发布
最新推荐文章于 2024-05-11 14:22:46 发布
阅读量1.3k 收藏 2
点赞数
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuang_nu/article/details/131436573
版权 
动态组件​
有些场景会需要在两个组件间来回切换，比如 Tab 界面：



上面的例子是通过 Vue 的 <component> 元素和特殊的 is attribute 实现的：


<!-- currentTab 改变时组件也改变 -->
<component :is="tabs[currentTab]"></component>
在上面的例子中，被传给 :is 的值可以是以下几种：

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

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

原文:

组件基础 | Vue.js动态组件

fury_123
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中用动态组件实现选项卡切换效果
08-31
在 Vue.js 中实现选项卡切换效果是一种常见的交互方式，本文将介绍如何使用动态组件来实现选项卡切换效果。 一、Vue.js 中的动态组件 在 Vue.js 中，动态组件是指可以在运行时动态地更改组件的类型和属性的组件。...
Vue3动态组件component详解
qq_45861961的博客
08-15 1万+
这样就展示了一个动态组件的完整用法,可以方便地在不同组件间进行切换并传递数据。动态组件非常适合需要根据不同条件展示不同内容的场景,掌握它可以更灵活地构建组件。动态组件component是Vue中非常实用的一个功能,它可以根据条件动态切换不同的组件。本文将详细介绍其用法。这样就可以通过修改currentComponent的值,来动态切换ComponentA和ComponentB了。需要注意的是,对于动态组件,Vue会在组件切换时销毁前一个组件实例并创建新实例。所以切换动态组件时不会保留组件的状态。
Vue3-41-组件- 动态组件 component 标签 和 is 属性 的使用
northcastle的博客
01-06 1812
vue3 中动态组件的 component 的基本使用，is 属性的介绍
详细说一说Vue3中的component组件
最新发布
Eqiqi的博客
05-11 3449
如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
11-19
一、is的使用 参考Vue 2.0教程，有讲到 is 的使用： 解析 DOM 模板时的注意事项 有些 HTML 元素，诸如 、、 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 、 和 ，只能出现在其它某些特定的元素内部。 这会导致我们使用这些有约束条件的元素时遇到一些问题。例如： 这个自定义组件 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的
Vue3中使用component :is 加载组件
m0_51431448的博客
02-11 3万+
1.不使用setup语法糖，这种方式和vue2差不多，is可以是个字符串 <template> <Child1 /> <Child2 /> <component :is="currentComp"></component> <el-button @click="compChange">切换组件</el-button> </template> <script> import
Vue动态组件 component :is的使用
qq_44342031的博客
01-10 1万+
Vue动态组件 component :is的使用
Vue3 动态组件 component:is= 失效
weixin_63681863的博客
09-25 4000
用Vue3，组件无需注册，所以就会提示“注册了不不使用”的报错，于是用了异步注册，甚至直接为了不报错就在下面使用3个组件，有异步加载，但还是实现不了预期效果组件已经有了，但是component宽高为0就上面这个代码，除了没用2个script剩下的没啥大差别了，就不知道为啥上面的不行，可能是预编译啥的吧，求大佬指点。
vue内置组件component--通过is属性动态渲染组件操作
10-15
在这种情况下，我们可以通过在 `<li>` 元素上使用 `is` 特性来指定要渲染的组件，如 `<li is="your-component"></li>`。这样，Vue会理解这个`<li>`标签实际上应该被替换为`your-component`组件，从而避免了HTML结构...
vue2.* element tabs tab-pane 动态加载组件操作
01-21
1、 注意 <component is=item.content></component> ：表明模板 <el v-for=(item) key=item.name label=item.title name=item.name > <component is=item.content></component> </el> 2、content: ‘Jbxx’ ，...
vue3使用动态component
m0_63701303的博客
11-30 2416
vue3使用动态component
vue3中结合component ：is使用tabs切换组件
LRQQHM的博客
07-27 2578
代码】vue3中结合componentis使用tabs切换组件。
vue 动态组件【详解】component :is
热门推荐
朝阳39的博客
12-31 4万+
vue 动态组件用于实现在指定位置上，动态加载不同的组件，核心代码为： <component :is="componentTag"></component> data() { return { componentTag: '', } }, componentTag 为自定义的变量，将需要加载的组件名赋值给它，即可在<component />标签出现的位置，渲染该组件。 完整范例代码 <template>
vue3 TS 使用 component is 动态加载组件的正确用法
pan-zy的专栏
10-08 7311
<template> <div> <div id="nav"> <ul> <li @click="onCompChange('CompA')">第一个组件</li> <li @click="onCompChange('CompB')">第二个组件</li> </ul> </div> asdfas &
Vue 3.0 内置组件
2201_75866484的博客
04-02 1198
请注意，这将移动实际的 DOM 节点，而不是被销毁和重新创建，并且它还将保持任何组件实例的活动状态。当一个子节点被更新，从屏幕上的位置发生变化，它会被应用一个移动中的 CSS 类 (通过。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
Vue3 动态组件 标签和:is 的用法
fury的博客
02-01 1238
来在多个组件间作切换时，被切换掉的组件会被卸载。如果想让组件一直存活需要使用 组件。如果不使用，每次切换组件，都将卸载之前的组件。如果使用选项式API ， :is的值可以是字符串。
Vue3 component标签 is属性动态绑定组件空白显示问题
qq_44933676的博客
03-24 2945
is属性绑定的组件以及 :prop_data绑定的数据都没有问题，经过前端代码检查，发现component组件没有转换成相应的组件，3）或者转换为render()函数创建的组件。搞了很久，页面也不报错，但是显示空白，2）vue-cli构建的项目构建的项目。1）解决方式 vite 构建的项目。最后在页面上发现了如下告警。
VUE3 的component动态组件IS 踩坑记录
daiwenjia310的博客
11-15 489
错误点：is 绑定的是实例；不加上markRaw ，一直报组件性能问题，加上后解决问题。vue2动态组件IS 绑定的是组件名称，而VUE3绑定的是组件实例。
vue中<component :is="Component">的用法
05-26
`<component :is="Component">` 是 Vue.js 中的动态组件，它的作用是根据 `Component` 的值动态地渲染出不同的组件。 具体来说，你可以将 `Component` 绑定到一个变量或者表达式上，然后根据这个变量或表达式的值来动态地渲染出对应的组件。例如： ```html <template> <div> <button @click="toggleComponent">Toggle Component</button> <component :is="currentComponent"></component> </div> </template> <script> import ComponentA from './ComponentA.vue' import ComponentB from './ComponentB.vue' export default { data() { return { currentComponent: ComponentA } }, methods: { toggleComponent() { if (this.currentComponent === ComponentA) { this.currentComponent = ComponentB } else { this.currentComponent = ComponentA } } }, components: { ComponentA, ComponentB } } </script> ``` 在上面的代码中，我们定义了两个组件 `ComponentA` 和 `ComponentB`，然后将 `currentComponent` 的初始值设为 `ComponentA`。在模板中，我们使用 `<component :is="currentComponent"></component>` 动态地渲染出当前的组件。 当我们点击 `Toggle Component` 按钮时，会调用 `toggleComponent` 方法，该方法会根据 `currentComponent` 的值来切换组件。这样就可以很方便地实现组件的动态渲染了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值