vue2 动态添加组件 （typescripte版本）

最新推荐文章于 2024-08-16 14:36:05 发布
最新推荐文章于 2024-08-16 14:36:05 发布
阅读量2.8k 收藏 1
点赞数
分类专栏： web vue 文章标签： 动态添加组件 vue :is
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012491646/article/details/85016333
版权
web 同时被 2 个专栏收录
7 篇文章 0 订阅
订阅专栏
vue
2 篇文章 0 订阅
订阅专栏

假设读者已经对vue有了初步的认识

目标

当想要在一个画板中添加一些组件（图形）的时候适用，如下图类似的效果，点击一个按钮的时候，动态地在面板中添加组件，请看 2.组件动态添加区的效果

效果

先上图 让大家看看动态添加组件的效果
在这里插入图片描述

技术说明

  • 1
    这里并不是添加简单的数据，而是添加组件(名)的功能，并利用vue的:is 特性 ,语法可看官网:is,但是官网只是做了简单的切换功能，本文在这个基础之上用它作 动态创建新组件的能力，简单有效！
  • 2.动态切换区 主要思路
    动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数.通过切换后的时间可以看到时间保存的是第一次创建的组件时间
  • 3.动态添加区 主要思路
    利用vue中的v-for语法糖特性，通过监听当前组件内部的组件名列表对象。当触发按钮（添加组件名）的时候，在列表中添加指定的名字就会动态添加组件

友情说明

项目clone到本地

    $ cd dcc
    $ npm install
    $ npm run serve

项目地址

乾坤瞬间
关注
专栏目录
vue2.0动态组件
qq_44039897的博客
03-30 844
1、vue提供了内置的<component>组件，专门用来实现动态组件的渲染 component标签是vue内置的，是组件的占位符 is属性的值表示要渲染组件的名字 is属性的值，应该是组件在components节点下的注册名称 <!--静态的，就是Left组件--> <component is="Left"></component> ​ <!--动态的，在data中写入comName--> <componen
vue动态添加，或删除组件，且实现组件上下移动
m0_45218136的博客
09-13 2987
vue动态添加，或删除组件，且实现组件上下移动
vue2---动态组件
厚积薄发.
07-28 5784
vue2学习之动态组件，星月前端，这篇文章总结了：内部组件component 组件的使用， 内部组件 keep-alive 组件的使用。
vue动态引用script脚本标签
最新发布
qq_46005282的博客
08-16 333
项目中有个功能是复制链接后，新开一个浏览器标签页打开分享页，但是这个分享页不需要之前引入的script标签，引入就会导致页面加载过慢。先把上面引入的script标签删除，获取当前的url，如果当前url不包含分享页的路由就动态添加script脚本。之前是直接在head中引入。
vue2.0动态添加组件
weixin_34401479的博客
12-14 451
方法一、&lt;template&gt; &lt;input type="text" v-model='componentName'&gt; &lt;button @click='add'&gt;click me to add a component&lt;/button&gt; &lt;/template&gt; &lt;script&gt; // 引入要添加的所有
Vue实现动态组件
stella_stella123的博客
06-03 398
Vue实现动态组件
Vue动态引入组件
热门推荐
weixin_45114462的博客
08-12 1万+
目录需求动态组件异步组件import函数动态组件和异步组件结合实现功能拓展1-处理加载状态拓展2-require方法AMD-require方法webpack-require.context方法 需求 当我们的页面需要不定量的组件进行渲染时,我们可能会大量引入全部组件再使用动态组件完成需求,通过组件的动态引入减少代码量以及项目难度,我们需要掌握以下内容 动态组件 通过<component>标签上的is属性实现对组件的动态引用 <template> <component :is=
vue动态组件
酷爱前端的小陈博客
05-01 8187
1. 什么是动态组件 动态组件指的是动态切换组件的显示与隐藏。 2. 如何实现动态组件渲染 vue 提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染。示例代码如下： 3. 使用 keep-alive 保持状态 默认情况下，切换动态组件时无法保持组件的状态。此时可以使用vue 内置的 <keep-alive> 组件保持动态组 件的状态。示例代码如下： 4. keep-alive 对应的生命周期函数 当组件被缓存时，会自动触发...
VUE3.0 动态添加异步组件的方法，以及遇到的问题
weixin_41895769的博客
12-24 5050
VUE3.0 动态添加异步组件的问题@TOC VUE3.0 动态添加异步组件的问题 先贴上思路来源 https://www.cnblogs.com/hanshuai/p/11196151.html https://www.vue3js.cn/docs/zh/guide/component-dynamic-async.html#异步组件 实现思路就不赘述了，看上面帖子就可以，这里只贴代码~ 组件代码 代码在下面 vite.config.js 代码打包路径和出入口文件 var path = require('
vue动态组件（组件切换操作）
此鱼非闲鱼也的博客
05-08 2394
vue动态组件 有时，我们需要在多个不同的组件之间进行切换操作。 组件的切换方式 (1)使用v-if 使用v-if 来处理，适用频繁操作的场景。 会不断地创建组件和销毁组件,影响性能; 不会保留组件改变后的状态及修改后的数据 <InBox v-if="currentCom==='InBox'"></InBox> <PostMail v-if="curren...
vue组件name使用 /动态组件 /组件缓存
m0_68687804的博客
10-14 3459
可以用组件的name属性值，来注册我们封装的组件，可以自己定义name属性组件名 让使用者有个统一的前缀风格App.vue中注册和使用。
vue+render 实现 动态加载组件 后面会用来做运营活动模板组件
03-19
vue+render 实现 动态加载组件 后面会用来做运营活动模板组件
动态给head添加script
09-03
动态给head添加script 动态给head添加script
Vue2动态组件
骆小洛
12-14 2006
重新创建动态组件的行为通常是非常有用的，但是在有些案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。同样也是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。要求被切换到的组件都有自己的名字，不论是通过组件的。缓存的根组件，也适用于缓存树中的后代组件。强制被切换掉的组件仍然保持“存活”的状态。以上代码中a和b均为两个组件的组件名。
vue 动态引入组件、批量引入组件(vue2,vue3)
无心使然云中漫步
12-10 3154
批量导入组件，在模板中利用动态组件component,根据key值渲染组件，注意这里的key类似‘’这样的形式，如果需要去掉路径可以用函数处理再放入componentList。
vue 动态、批量引入组件
qq_52337177的博客
05-14 1749
一次性处理多个组件的引入，减少了多次请求的开销，节省多次手动引入注册
vue 动态引入组件方法
weixin_45685394的博客
10-12 324
vue
vue进阶——动态引入组件
秋书一叶的博客
03-13 2280
根据 Vuex 存储中的 selectedMapComponent 动态计算组件路径，并在组件创建时和 selectedMapComponent 变化时加载对应的动态组件。
vue的动态组件
hlonelier的博客
06-13 998
动态切换组件的显示和隐藏。vue提供了一个内置的组件,专门用来实现动态组件的渲染。可以把其理解为占位符。要展示哪个组件，就指定要展示的名称。<template>-- 3.点击按钮，动态切换组件的名称 -->​//不直接使用标签​-- 2.通过js属性，动态指定要渲染的组件 --></div></div>​<script>// 1. 导入需要使用的 .vue 组件data() {return {//1.当前要渲染的组件名称},// 2. 注册组件Left,
vue 2 动态添加组件
09-01
Vue 2中动态添加组件的方法可以通过利用`:is`特性来实现。首先，你需要在组件的挂载点上绑定`:is`特性，这样多个组件可以使用同一个挂载点并进行动态切换。如果你想要保留切换出去的组件的状态或避免重新渲染，你可以添加一个`keep-alive`指令参数。其次，你可以通过监听当前组件内部的组件名列表对象，当触发按钮时，在列表中添加指定的组件名，就可以动态地添加组件。 在Vue的核心代码中，你可以使用`$options.components`来动态添加组件。例如，你可以在方法中定义一个`add`方法，通过该方法在`$options.components`对象中添加指定的组件名，并使用`require`方法来加载组件文件。在`render`函数中，你可以使用`createElement`方法来创建一个`appTable`组件。 这样，当你触发添加组件的按钮时，会动态地将指定的组件添加到Vue应用中。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue2 动态添加组件 （typescripte版本）](https://blog.csdn.net/u012491646/article/details/85016333)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue动态添加组件](https://blog.csdn.net/m0_37894494/article/details/120539267)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值