动态组件<component></component>、<keep-alive></keep-alive>

本文介绍了Vue.js中动态组件<component></component>的使用,特别是通过is属性来动态绑定组件名。同时,讨论了组件切换时由于组件销毁导致的数据丢失问题,并提出了解决方案——使用<keep-alive></keep-alive>来保持组件的状态,实现组件的复用性。
摘要由CSDN通过智能技术生成
  • Vue内置的组件:<component></component>:动态组件,你说我是谁,我就是谁;
  • 有一个属性 is ,属性值是组件名称,加在<component>,则<component>就是这个组件;
  • 如果属性值是一个变量状态,要在is前面加上“:”动态绑定;

  • 组件切换没有复用性,就是你在上一个组件上临时创建的值,让你切换到下一个组件后再切回来时,这个临时值没有了;
  • 因为切换下一个组件上一个组件就删了,再切回来时再创建新的组件;
  • 如果想让组件不被删除,活下去;
  • 就在外面加上<keep-alive></keep-alive>

没用<component></component>之前,切换组件要用which这个中间状态: 

<home v-show="which===home"></home>
<list v-show="which===home"></list>
<shopcar v-show="which=&#
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

陌依依

你的鼓励是我最大的动力

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

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

打赏作者

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

抵扣说明:

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

余额充值