Vue之动态组件

最新推荐文章于 2024-04-09 09:40:05 发布
最新推荐文章于 2024-04-09 09:40:05 发布
阅读量465 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44738158/article/details/120531246
版权

怎么动态切换组件的显示与隐藏呢

vue提供了一个内置的<component>组件，专门用来实现动态组件的渲染
需要在data中定义一个变量来动态绑定组件的名字，再用component上的is属性 绑定这个变量。
这样只会动态创建和销毁新组件 ，并不能保存组件和里面的数据。这样就需要用到keep-alive把component包裹住，keep-alive只是缓存组件，并不会销毁组件
在这里插入图片描述

在这里插入图片描述

王巨饿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue动态组件与异步组件实例详解
10-17
主要介绍了Vue动态组件与异步组件,结合实例形式分析了动态组件与异步组件相关概念、功能及使用技巧,需要的朋友可以参考下
Vue动态组件实例解析
08-29
让多个组件使用同一个挂载点，并动态切换，这就是动态组件。这篇文章主要介绍了Vue动态组件 ,需要的朋友可以参考下
详解Vue3中如何使用动态组件
最新发布
qq_43474235的博客
04-09 508
在 Vue 3 中,动态组件是一种允许在运行时动态切换组件的机制,本文主要为大家详细介绍了动态组件在Vue3中的具体使用。Vue 3 提供了 元素以及 is 特性来实现动态组件的切换。
图片动态绘制组件 vue2.x
07-14
安装 yarn add vue-image-painter # 或 npm i -S vue-image-painter 引入 // main.js 入口中 import ImagePainter from 'vue-image-painter' Vue.use(ImagePainter) 使用，请参考Demo 源码
vue 动态组件
LPL0158的博客
10-05 152
动态组件 有的时候，我们需要在多个不同的组件之间进行切换。虽然我们可以通过 v-if 来处理，但是会比较麻烦，vue 提供了一个更方便的方式来处理这种情况 component 组件 component 是 vue 内置的一个组件，它提供一个 is 属性用来动态渲染不同的组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport
vue 动态组件
技术斋
07-17 915
介绍，vue动态组件，及其动态组件切换时的动画 https://coligo.io/dynamic-components-in-vuejs/
关于动态组件的一个小小的注意点：内存里的数据需要手动回收
yanhappiness
08-03 257
通过动态组件加载进来的页面，内存是不会自动回收的，影响性能。 <el-dialog class="childPage" title="" :visible.sync="dialogVisible" width="100%" height="100%"> <component v-bind:is="dialogPage"></component> </el-dialog> 动态组件切换时，子组件里面数据不会主动回收。所以要在关闭该页面的时候回收数据 举个例
Vue组件:组件的动态添加与删除
weixin_30433075的博客
09-15 1746
一、实现效果 二、实现代码 HelloWorld.vue <template> <div class="hello"> <child-page v-for="(item,index) in items" :key="index" :index="index" :items="items" @deleteIn...
vue中如何使用keep-alive动态删除已缓存组件
FighterLiu的专栏
06-12 4992
在做后台管理系统的时候，有这样一个需求。点击左边的菜单，会在右边的顶部生成一个个tag导航标签。当打开多个tag页时，用户可以在多个tag之间进行切换。需要在新增，修改页面切换tag时候，保留之前的信息，不进行页面的刷新。经过查询vue文档，可以使用keep-alive实现标签路由缓存，实现方式如下： 在路由配置的meta中添加keepAlive，如下： 然后在页面中使用v-if做判断，并且加上key 使用上面这种方式解决了修改不同记录的缓存问题，因为不同记录的fullPath 不一样，...
Vue 组件的动态添加与删除
m0_38029610的博客
08-27 230
<template> <section> <button @click="add()">点击添加</button> <hr/> <my-test v-for="(item, index) in people" :key="index" :index="index" :itemC="item"
vue中实现动态增加、删除子组件，并获取子组件的值（或批量执行子组件的方法）
zongmaomx的博客
07-10 3231
当点击添加入库时，自动增加一个相同的form表单组件，当点击删除时，删除当前的组件 add-wu-zi即为组件，给items默认有一个对象，对象中默认带有一个nowTime属性，这个之后会说 当点击添加入库时，给items增加一个对象， 然后组件v-for遍历items即可，但是:key不能使用index，因为使用了index，在你移除掉一个组件的时候，index会重新排序，会修改，导致你删除的组件永远是从最后一个删除，不会删除你想要删除的那个组件。所以我这里增加了nowTime...
Vue 自定义动态组件实例详解
10-18
vue的ui组件库很多种，但是这么多的组件库也不能满足我们的开发需求，所以需要我们根据自己需求自己写一个插件，下文小编通过两个栗子给大家介绍js自定义组件的方法，感兴趣的朋友一起看看吧
vue3中使用component动态组件常见问题
不负韶华梦为马
08-13 675
vue3中使用component动态组件常见问题。
Vue 解决 组件切换 组件没有被销毁
Bnana博客
05-11 4724
Vue 解决 组件切换组件未销毁 解决方法 去掉 keep-alive <router-view keep-alive ></router-view> 解析： keep-alive 保留 组件状态 不销毁 去掉 keep-alive 不保留组件状态
vue-动态组件（component），缓存组件（keep-alive）、异步组件（defineAsyncComponent ）
weixin_68211919的博客
10-16 2444
一、v-if和v-for两个条件使用避免多余标签 二、动态组件（component）（is为属性，is为变量的情况） 三、缓存组件（keep-alive）（与动态组件结合使用，生命周期函数、选择性缓存组件和选择性不缓存组件，缓存多个组件） 四、异步组件（defineAsyncComponent ）（懒加载组件和预渲染组件）
Vue3动态组件component详解
热门推荐
qq_45861961的博客
08-15 1万+
这样就展示了一个动态组件的完整用法,可以方便地在不同组件间进行切换并传递数据。动态组件非常适合需要根据不同条件展示不同内容的场景,掌握它可以更灵活地构建组件。动态组件component是Vue中非常实用的一个功能,它可以根据条件动态切换不同的组件。本文将详细介绍其用法。这样就可以通过修改currentComponent的值,来动态切换ComponentA和ComponentB了。需要注意的是,对于动态组件,Vue会在组件切换时销毁前一个组件实例并创建新实例。所以切换动态组件时不会保留组件的状态。
Vue-动态组件
weixin_45768538的博客
07-18 1203
动态组件指的是动态切换组件的显示与隐藏。 keep-alive
Vue.js 中的动态组件是什么？如何使用动态组件？
it_xushixiong的博客
06-05 6619
在Vue.js中，动态组件是一种可以动态切换组件内容和结构的技术。动态组件允许我们在不刷新整个页面的情况下，动态地加载不同的组件，并在同一个位置上进行切换。动态组件的核心概念是keep-alive组件。keep-alive组件是一种特殊的组件，它可以缓存被包裹的动态组件的状态和实例，从而避免在组件切换时重新渲染和销毁组件。
vue动态组件
酷爱前端的小陈博客
05-01 8053
1. 什么是动态组件 动态组件指的是动态切换组件的显示与隐藏。 2. 如何实现动态组件渲染 vue 提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染。示例代码如下： 3. 使用 keep-alive 保持状态 默认情况下，切换动态组件时无法保持组件的状态。此时可以使用vue 内置的 <keep-alive> 组件保持动态组 件的状态。示例代码如下： 4. keep-alive 对应的生命周期函数 当组件被缓存时，会自动触发...
vue的动态组件
06-01
Vue的动态组件是一种特殊的组件，它可以根据数据的变化动态地选择并渲染不同的组件。 使用动态组件的步骤如下： 1. 定义多个组件，每个组件都有自己的模板和逻辑。 2. 在父组件中使用 <component> 标签，并通过 v-bind:is 属性绑定一个变量，该变量的值为当前需要渲染的组件的名称或组件对象。 3. 当数据发生变化时，动态组件会根据当前绑定的组件名称或组件对象，自动选择并渲染对应的组件。 例如，下面的代码演示了一个使用动态组件的例子： ```html <template> <div> <h2>动态组件示例</h2> <button v-for="name in componentNames" :key="name" @click="currentComponent = name">{{ name }}</button> <component :is="currentComponent"></component> </div> </template> <script> import ComponentA from './ComponentA.vue' import ComponentB from './ComponentB.vue' export default { name: 'DynamicComponentExample', components: { ComponentA, ComponentB }, data() { return { componentNames: ['ComponentA', 'ComponentB'], currentComponent: 'ComponentA' } } } </script> ``` 在上面的例子中，我们定义了两个组件 ComponentA 和 ComponentB，并在父组件中使用了动态组件来渲染它们。当用户点击按钮时，当前绑定的组件名称会根据用户的选择发生变化，从而触发动态组件的重新渲染。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王巨饿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值