Vue中怎么实现动态组件与异步组件
本篇文章给大家分享的是有关Vue中怎么实现动态组件与异步组件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
成都创新互联专注为客户提供全方位的互联网综合服务,包含不限于网站建设、网站设计、石峰网络推广、成都微信小程序、石峰网络营销、石峰企业策划、石峰品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联为所有大学生创业者提供石峰建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.com
1 在动态组件上使用 keep-alive
我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件:
当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面:
你会注意到,如果你选择了一篇文章,切换到 Archive 标签,然后再切换回 Posts,是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候,Vue 都创建了一个新的 currentTabComponent
实例。
重新创建动态组件的行为通常是非常有用的,但是在这个案例中,我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,我们可以用一个
元素将其动态组件包裹起来。
现在这个 Posts 标签保持了它的状态 (被选中的文章) 甚至当它未被渲染时也是如此。
html:
js:
Vue.component('tab-posts', { data: function () { return { posts: [ { id: 1, title: '赶在618前夕,微信更新了两个支付与电商功能', content: '本周末,中国消费者即将迎来上半年最大的消费网购峰值,6月17日父亲节,6月18日端午节,也是京东、天猫等电商的618购物节。略微出人意料但又在情理之中的是,中国最大的社交平台微信,近日密集上线了两个与支付和电商相关的功能。' }, { id: 2, title: '腾讯要花32亿收购《绝地求生》开发商10%股份', content: '目前腾讯和蓝洞已经接近达成协议,如果交易成功,腾讯将成为蓝洞的第二大股东。' }, { id: 3, title: '这两个地球之眼是真的吗?形成原因至今仍是谜团', content: '一名俄罗斯男子乘坐直升机游览时,经过俄罗斯萨哈林岛(库页岛)时,看到一个巨大的坑洞。地球上坑坑洞洞很多,本该不用大惊小怪。但当飞机离得更近,换了个角度看这个坑时,他震惊了,这分明就是“地球的眼睛”。' } ], selectedPost: null } }, template: `
- {{ post.title }}
{{ selectedPost.title }}