vue动态组件 & 异步组件 vue动态生成组件,循环生成组件

15 篇文章 0 订阅
  • 有的时候,在不同组件之间进行动态切换是非常有用的,比如在一个多标签的界面里实现类似tab页的效果:
上述效果也可以通过 Vue 的 元素加一个特殊的 is attribute 来实现:
	<!-- 组件会在 `currentTabComponent` 改变时改变 -->
	<component v-bind:is="currentTabComponent"></component>
  • 在上述示例中,currentTabComponent 可以包括已注册组件的名字,或
    一个组件的选项对象
你也可以通过v-bind给所有可能动态生成的组件绑定该属性
<component v-bind:is="currentTabComponent" data="dataSource"></component>

所有动态生成的组件就都可以接收到这个属性绑定的值
一般如果动态组件使用较多我可能会喜欢使用mixin进行混入,改天再出一个mixin教程吧~~

is接收参数类型 string | Object

异步组件

在动态组件上使用 keep-alive
当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。
在这里插入图片描述
你会注意到,如果你选择了一篇文章,切换到 Archive 标签,然后再切换回 Posts,是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候,Vue 都创建了一个新的 currentTabComponent 实例。

重新创建动态组件的行为通常是非常有用的,但是在这个案例中,我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,我们可以用一个 元素将其动态组件包裹起来。
	<!-- 失活的组件将会被缓存!-->
	<keep-alive>
	  <component v-bind:is="currentTabComponent"></component>
	</keep-alive>

来看看修改后的结果:
在这里插入图片描述

现在这个 Posts 标签保持了它的状态 (被选中的文章) 甚至当它未被渲染时也是如此。你可以在这个示例查阅到完整的代码。
注意这个 要求被切换到的组件都有自己的名字,不论是通过组件的 name 选项还是局部/全局注册。
参考vue官方文档
动态组件
https://cn.vuejs.org/v2/guide/components.html#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6

异步组件
https://cn.vuejs.org/v2/guide/components-dynamic-async.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

人间清醒小仙女

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

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

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

打赏作者

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

抵扣说明:

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

余额充值