vue3多个组件设置ref

多个组件

<comp1 :ref="setRef" name="comp1"/>
<comp2 :ref="setRef" name="comp2"/>

设置ref

const refs = new Map();
const setRef = (el) => {
    refs.set(el.$attrs['name'], el);
};

  • 8
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 3.0中,动态组件的实现可以通过使用内置组件component来实现。component组件有一个特殊的属性is,用于指定要渲染的动态组件。通过设置is属性的值为一个变量,可以动态地加载不同的组件。比如,可以这样使用component组件来实现动态组件: <component :is="currentComponent"></component> 其中,currentComponent是一个data属性,可以根据需要来动态修改它的值,从而加载不同的组件。 同时,如果想要在动态组件之间保留组件状态或避免重新渲染,可以使用Vue 3.0中的内置组件keep-alive来包裹动态组件。keep-alive组件的主要作用是缓存不活动的组件实例,而不是销毁它们。通过将动态组件包裹在keep-alive组件中,可以实现组件状态的保留。 例如,可以这样使用keep-alive组件包裹动态组件: <keep-alive> <component :is="currentComponent"></component> </keep-alive> 这样,当切换动态组件时,原先的组件实例不会销毁,而是被缓存起来,以便再次使用。 除了component和keep-alive内置组件之外,Vue 3.0还提供了其他一些内置组件,如transition、transition-group、slot和teleport。这些内置组件可以用于实现过渡效果、列表过渡效果、插槽和传送门等功能。 总结起来,Vue 3.0中可以通过component和keep-alive内置组件来实现动态组件的功能,同时还有其他一些内置组件可以用于实现更多的功能需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值