建设银行 杭州市公积金管理中心网站,典型的电子商务网站,微商城分销系统制作,wordpress 加分类先阅读 【Vue 2 组件基础】中的初步了解动态组件。 动态组件与keep-alive
我们知道动态组件使用is属性和component标签结合来切换不同组件。
下面给出一个示例#xff1a;
!DOCTYPE html
htmlheadtitleVue 动态组件/titlescri…先阅读 【Vue 2 组件基础】中的初步了解动态组件。 动态组件与keep-alive
我们知道动态组件使用is属性和component标签结合来切换不同组件。
下面给出一个示例
!DOCTYPE html
htmlheadtitleVue 动态组件/titlescript srchttps://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js/script
/headbodydiv idapp!-- tab 标签页 --divbutton clicktab home首页/buttonbutton clicktab posts文章/button/div父组件count: {{count}}!-- 动态组件 --component :istab incrementcount$event/component/divscript// 注册组件Vue.component(home, {data: function () {return {count: 0}},template: divdiv首页内容/divdiv子组件count: {{count}}/divbutton clickcount;$emit(increment, count)点击了{{count}}次/button/div,});Vue.component(posts, {template: div文章内容/div});var vm new Vue({el: #app,data: {tab: home,count: 0},});/script
/body/html
script看代码可以知道父组件的count会在子组件count更新后变为子组件的count值。但我们切换组件后再切换回来会发现父组件count没变子组件count变为初始值。这是因为每次切换组件都会创建当前组件的新实例。
那怎么保存先前组件的状态呢
Vue提供了keep-alive组件。我们使用该元素将要缓存的组件包裹起来。让我们看看效果
keep-alivecomponent :istab incrementcount$event/component
/keep-alive成功解决问题
了解更多keep-alive组件的细节。 异步组件
异步组件是一种加载组件的方式它允许我们将组件的加载推迟到需要时再进行以提高应用程序的性能和加载速度。
我们可以通过不同的方式使用异步组件。
1.工厂函数
使用Vue.component方法来定义一个异步组件工厂函数
Vue.component(async-component,function(resolve,reject){//模拟异步加载延迟一段时间后解析组件setTimeout(function(){resolve({template:divh2Async Component Content/h2/div})},1000)
})使用Vue.component方法结合webpack的code-splitting来定义一个异步组件工厂函数
Vue.component(async-component,function(resolve,reject){//这个特殊的require语法会告诉webpack自动将编译后的异步组件拆分成不同的块require(./AsyncComponent.vue,resolve)
})在上面代码中async-component是你定义异步组件的名字后面的工厂函数有两个参数resolve和reject。resolve是一个函数异步加载成功时会调用它。reject则是在异步加载失败时调用。
2.Vue.component动态导入webpack 2的代码分割ES2015的模块语法
Vue.component(async-webpack-example,()import(./my-async-component)
);()import(./my-async-component)返回一个PromiseVue会根据Promise的状态来自动处理异步加载和渲染的过程。
3.局部注册动态导入
new Vue({components:{my-component:()import(./my-async-component)}
})处理加载状态
异步组件工厂函数可以返回一个对象该对象包含有关异步组件加载、加载中、加载失败等情况的配置信息这种方式允许你更加精细地控制异步组件地加载和渲染过程。下面是这种格式的异步组件配置对象的详细解释
const AsyncComponent()({//需要加载的组件component:import(./MyComponent.vue),//异步加载时使用的组件loading:LoadingComponent,//加载失败时使用的组件error:ErrorComponent,//展示加载时组件的延迟时间默认值是200毫秒delay:200,// 如果提供了超时时间且组件加载也超时了// 则使用加载失败时使用的组件。默认值是Infinity即没有超时限制timeout: 3000
})
