Vue3ts动态组件

最新推荐文章于 2024-09-09 10:14:35 发布
最新推荐文章于 2024-09-09 10:14:35 发布
阅读量813 收藏 1
点赞数 1
分类专栏： Vue3 setup语法糖 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61398960/article/details/126783028
版权

动态组件

https://xiaoman.blog.csdn.net/article/details/122891279
image.png
引入组件的时候如果通过reactive包裹了这个组件，那么vue会给你报错，因为把组件渲染成一个响应式对象是没有意义的，浪费性能，所以我们可以通过showRef或者markRaw来把它包裹一下
特别注意：vue3中如果需要使用动态组件的话，:is = “这里必须是组件实例，不能是字符串”
传入组件的方式：
image.png

有蓝
关注
专栏目录
Vue3 全局组件，局部组件，递归组件，动态组件
qq_43502858的博客
06-19 752
组件使用的频率高，就可以封装成全局组件 注册全局组件 使用全局组件 局部组件 在一个组件A内 通过import 去引入别的组件B，称之为局部组件组件自己调用自己，通过一个条件来结束递归，否则导致内存泄漏 在父组件配置数据结构，数组对象格式 传给子组件 使用递归组件 动态组件 让多个组件使用同一个挂载点，并动态切换 在挂载点使用 component 标签，然后使用 v-bind:is=“组件” A组件 B组件 C组件...
vue3-components：vue3 ts组件库
02-16
Element Plus-一个Vue.js 3.0 UI库 :flexed_biceps: Vue 3.0合成API :fire: 用TypeScript编写 状态：测试版 该项目仍在大力开发中。 欢迎加入我们，并提出您的第一个请求。 特别感谢以下机构的慷慨赞助： 文献...
vue3 将字符串组件转为vnode 进行渲染
fame123500的专栏
07-19 2971
近期不忙，想着使用vue3 将字符串模板进行渲染并显示组件。如下代码计划上面的内容是通过后台接口获取，并根据返回内容挂载到项目中使用，这样再以后做新项目时候，ctrl+C ctrl+v 后直接改下取数据的接口，改下逻辑新项目就可以直接使用了，网上看了很多教程，但是感觉复杂而且不够灵活，先把思路整理记录下。使用的的组件 @vue/compiler-sfc ，涉及到的Vue 的 函数有 crateVnode 或者 h 或者 createAPP,这三个都可以。
Vue3 动态组件
最新发布
猫脸码客的博客
09-09 692
【代码】Vue3 动态组件。
vite+ts+vue3 知识点（动态组件）
微光无限的博客
12-05 478
vite+ts+vue3 知识点（动态组件）
vue3+ts+vite 动态组件保姆级教程
weixin_44166849的博客
04-22 427
【代码】vue3+ts+vite 动态组件保姆级教程。 vue3 动态组件详解
vue3+ts深入组件（四）动态组件
Asen-coder的博客
11-28 1019
如果使用v-if 这意味着，当用户还未点击tab进行切换导航的时候，用户就已经被动的将所有资源加载了，这种情况不利于前端性能优化，因此在这里我们将 v-if 的方法当作最后的救命稻草（尽量不使用），动态组件是在模板中定义的一个组件挂载点，将多个组件同时挂载这个挂载点上面，就可以进行动态切换，动态组件通常使用 Vue 的。v-for在循环对象时，可以提供三个值，value,key index 三个值位置不可更换!来实现，关于vue-Router详细使用方法教程，后续会陆续发布在我的csdn博客中…
vue3+ts 动态组件的使用
weixin_45932157的博客
11-20 262
【代码】vue3+ts 动态组件的使用。
vue3+ts实战项目组件工具库.zip
03-03
Vue3+TS实战项目组件工具库是一个以Vue3和TypeScript为核心技术的开发资源，旨在帮助开发者构建高效、可复用且类型安全的前端应用。这个压缩包包含了一个名为"visualization-master"的项目，可能是一个专门用于数据...
Vue3+TS图片裁切组件
08-02
Vue3+TS图片裁切组件，在main.ts中全局引入 import ImageCrop from "@/components/image-crop/" const app = createApp(App) app.use(ImageCrop); app.mount('#app ') 在对应的页面使用 裁切比例，不用此参数自由...
vue3+ts 表单和表格配置化组件
10-26
"vue3+ts 表单和表格配置化组件"这一主题，主要关注的是如何利用Vue3、TypeScript以及Element Plus来创建高度可配置的表单和表格组件。这些组件通常用于处理动态数据，允许开发者通过配置对象来定义表单字段或表格列...
在vue3+ts+setup语法糖中使用图片预览组件
09-14
在Vue3中，开发人员可以利用TypeScript(简称ts)的强类型特性和新的`setup`语法糖来构建更加安全和高效的应用。本教程将详细讲解如何在Vue3项目中结合TypeScript和`setup`语法糖实现图片预览功能。 首先，让我们了解...
Vue 3 中，使用 TSX 编写动态组件
zhu_menglu的博客
04-27 3376
在 Vue 3 中，使用 TSX 编写动态组件可以通过。的值动态渲染了不同的子组件，使用了。属性来指定子组件的名称，这里使用了。在上面的例子中，根据。
【Vue3】动态组件
热门推荐
小秀的博客
08-08 1万+
元素，并通过 is 特性绑定一个组件的名称或组件对象。通过在父组件中改变 is 特性的值，可以动态切换渲染的组件。// markRaw：作用：标记一个对象，使其永远不会再成为响应式对象。// markRaw：作用：标记一个对象，使其永远不会再成为响应式对象。输出 comId 的值，出现 comId 的属性被劫持，出现性能浪费。// 这里不需要将对象中所有数据变为响应式，可以使用ref。// 这里不需要将对象中所有数据变为响应式，可以使用ref。// 这里不需要将对象中所有数据变为响应式，可以使用ref。
Vue3：动态组件
大香蕉的博客
04-17 7166
使用component内置组件，通过is绑定要展示的组件 多用于tab页切换的场景 markRaw的作用及应用（必须使用markRaw跳过对组件的代理，否则vue会给警告） 效果图 Vue2回顾 <template> <div> <component :is="A"></component> </div> </template> <script> import A from './A'..
vue3 + ts + vite 动态导入多个组件并挂载
weixin_42592962的博客
04-12 593
vue3 + ts + vite 动态导入多个组件并挂载
Vue3 之 动态组件和KeepAlive组件
weixin_45092437的博客
05-28 2270
动态组件允许在同一挂载节点动态切换多个组件，可以根据具体条件，动态决定显示的组件。动态组件默认只保持当前组件存活，其余被切换掉的组件会被卸载，但可以结合KeepAlive组件实现被切换掉的组件保持存活状态。将KeepAlive组件包裹在动态组件的外层，当动态组件发生切换时，默认会将所有被切走的非活跃组件进行缓存，而不是销毁，并且组件内部的状态也会被保留。
七、vue3+ts项目框架搭建——动态菜单—递归组件的使用
xiaoququ的博客
02-18 844
【代码】七、动态菜单—递归组件的使用。
vue3中如何使用动态组件
Q10_01Q的博客
06-06 1147
必须使用markRaw跳过对组件的代理。内置组件，通过is绑定要展示的组件。
vue3 ts 动态组件
09-06
Vue 3中使用TypeScript创建动态组件有几种方式。下面是两种常用的方法： 1. 使用`<component>`元素：Vue中的`<component>`元素可以根据提供的组件名称动态渲染组件。在TypeScript中，您可以使用`import`语句导入组件，并将其作为动态组件的选项传递给`<component>`元素。 示例如下： ```typescript <template> <component :is="dynamicComponent"></component> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import MyComponent1 from './MyComponent1.vue'; import MyComponent2 from './MyComponent2.vue'; export default defineComponent({ components: { MyComponent1, MyComponent2, }, setup() { const dynamicComponent = ref('MyComponent1'); return { dynamicComponent, }; }, }); </script> ``` 2. 使用动态引入：Vue 3与Webpack和ES模块的动态导入紧密集成，这使得您可以异步地加载组件并将其作为动态组件进行渲染。 示例如下： ```typescript <template> <button @click="loadComponent">Load Component</button> <component v-if="loadedComponent" :is="loadedComponent"></component> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const loadedComponent = ref(null); const loadComponent = async () => { const { default: component } = await import('./MyComponent.vue'); loadedComponent.value = component; }; return { loadComponent, loadedComponent, }; }, }); </script> ``` 这些方法允许您在Vue 3中使用TypeScript创建动态组件。您可以根据自己的需求选择适合您项目的方法。希望对您有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值