自助下单小程序_Vue动态组件与异步组件实例详解

  • 栏目:公司新闻 时间:2021-01-07 15:29 分享新闻到:
<返回列表

Vue动态组件与异步组件实例详解       这篇文章主要介绍了Vue动态组件与异步组件,结合实例形式分析了动态组件与异步组件相关概念、功能及使用技巧,需要的朋友可以参考下

本文实例讲述了Vue动态组件与异步组件。分享给大家供大家参考,具体如下:

1 在动态组件上使用 keep-alive

我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件:

 component v-bind:is="currentTabComponent" /component 

当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面:

你会注意到,如果你选择了一篇文章,切换到 Archive 标签,然后再切换回 Posts,是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候,Vue 都创建了一个新的 currentTabComponent 实例。

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

 !-- 失活的组件将会被缓存!-- 
 keep-alive 
 component v-bind:is="currentTabComponent" /component 
 /keep-alive 

现在这个 Posts 标签保持了它的状态 (被选中的文章) 甚至当它未被渲染时也是如此。

html:

 div id="ponent-demo" 
 button
 v-for="tab in tabs"
 v-bind:key="tab"
 v-bind:class="['tab-button',{active:currentTab === tab}]"
 v-on:click="currentTab = tab"
 {{ tab }}
 /button 
 keep-alive 
 component
 v-bind:is="currentTabComponent"
 /component 
 /keep-alive 
 /div 

js:

ponent('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: `
 div 
 v-for="post in posts"
 v-bind:key="post.id"
 v-bind: v-on:click="selectedPost = post" 
 {{ post.title }}
 /li 
 /ul 
 div 
 v-if="selectedPost"
 h3 {{ selectedPost.title }} /h3 
 div v-html="selectedPost.content" /div 
 /div 
 strong v-else 
 请点击某个标签页
 /strong 
 /div 
 /div 
ponent('tab-archive', {
 template: ' div archive 页面 /div '
new Vue({
 el: '#ponent-demo',
 data: {
 currentTab: 'Posts',
 tabs: ['Posts', 'Archive']
 computed: {
 currentTabComponent: function () {
 return 'tab-' + this.currentTab.toLowerCase();

css:

.tab-button {
 padding: 6px 10px;
 border-top-left-radius: 3px;
 border-top-right-radius: 3px;
 border: 1px solid #ccc;
 cursor: pointer;
 background: #f0f0f0;
 margin-bottom: -1px;
 margin-right: -1px;
.tab-button:hover {
 background: #e0e0e0;
.tab-button.active {
 background: #e0e0e0;
.tab {
 border: 1px solid #ccc;
 padding: 10px;
.posts-tab {
 display: flex;
.posts-sidebar {
 max-width: 40vw;
 margin: 0;
 padding: 0 10px 0 0;
 list-style-type: none;
 border-right: 1px solid #ccc;
.posts-sidebar li {
 white-space: nowrap;
 text-overflow: elli凡科抠图is;
 overflow: hidden;
 cursor: pointer;
.posts-sidebar li:hover {
 background: #eee;
.posts-sidebar li.selected {
 background: lightblue;
.selected-post-container {
 padding-left: 10px;
.selected-post :first-child {
 margin-top: 0;
 padding-top: 0;

效果:

2 异步组件

在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。为了简化,Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会被触发,且会把结果缓存起来供未来重渲染。例如:

ponent('async-example', function (resolve, reject) {
 setTimeout(function () {
 //在此定义组件
 resolve({
 template: `
 div 
 我是异步加载的哦
 /div 
 }, 1000);

如你所见,这个工厂函数会收到一个 resolve 回调,这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。这里的 setTimeout 是为了演示用的,如何获取组件取决于你自己。一个推荐的做法是将异步组件和 一起配合使用:

ponent('async-webpack-example', function (resolve) {
 // 这个特殊的 `require` 语法将会告诉 webpack
 // 自动将你的构建代码切割成多个包,这些包
 // 会通过 Ajax 请求加载
 require(['./ponent'], resolve)

你也可以在工厂函数中返回一个 Promise,所以把 webpack 2 和 ES2015 语法加在一起,我们可以写成这样:

ponent(
 'async-webpack-example',
 // 这个 `import` 函数会返回一个 `Promise` 对象。
 () = import('./ponent')

当使用局部注册的时候,你也可以直接提供一个返回 Promise 的函数:

new Vue({
 // ...
 components: {
 'my-component': () = import('./ponent')

如果你是一个 Browserify 用户同时喜欢使用异步组件,很不幸这个工具的作者明确表示异步加载“并不会被 Browserify 支持”,至少官方不会。Browserify 社区已经找到了一些变通方案,这些方案可能会对已存在的复杂应用有帮助。对于其它的场景,我们推荐直接使用 webpack,以拥有内建的被作为第一公民的异步支持。

处理加载状态

2.3.0+ 新增

这里的异步组件工厂函数也可以返回一个如下格式的对象:

const AsyncComponent = () = ({
 // 需要加载的组件 (应该是一个 `Promise` 对象)
 component: import('./MyComponent.vue'),
 // 异步组件加载时使用的组件
 loading: LoadingComponent,
 // 加载失败时使用的组件
 error: ErrorComponent,
 // 展示加载时组件的延时时间。默认值是 200 (毫秒)
 delay: 200,
 // 如果提供了超时时间且组件加载也超时了,
 // 则使用加载失败时使用的组件。默认值是:`Infinity`
 timeout: 3000

注意如果你希望在 Vue Router 的路由组件中使用上述语法的话,你必须使用 Vue Router 2.4.0+ 版本。

希望本文所述对大家vue.js程序设计有所帮助。


分享新闻到:

更多阅读

自助下单小程序_Vue动态组件与异步组件实

公司新闻 2021-01-07
Vue动态性部件与多线程部件案例详细说明 本文关键详细介绍了Vue动态性部件与多线程部...
查看全文

广东省建网站吧-手机网页解决方法

公司新闻 2021-01-07
商城系统、出口外贸、手机上手机微信、营销推广型企业网站建设计划方案出示公司知名品牌...
查看全文

厦门市小程序流程_Vue+Django项目布置详解

公司新闻 2021-01-07
Vue+Django新项目布署详细说明 本文关键详细介绍了Vue+Django新项目布署详细说明,原文中根...
查看全文
返回全部新闻


区域站点: 南丰县如何创建网站   南宫市建站公司   囊谦县建网站   南和县一键建站   南华县如何创建网站   南江县建站公司   南京市建网站   南靖县一键建站   南康市如何创建网站   南乐县建站公司   南陵县建网站   南宁市一键建站   南平市如何创建网站   南皮县建站公司   南市区建网站   南通市一键建站   南投县如何创建网站   南雄市建站公司   南溪县建网站   南阳市一键建站   南漳县如何创建网站   南召县建站公司   南郑县建网站   那坡县一键建站   那曲县如何创建网站   纳雍县建站公司   讷河市建网站   内黄县一键建站   内江市如何创建网站   内丘县建站公司   内乡县建网站   嫩江市一键建站   聂荣县如何创建网站   尼玛县建站公司   尼木县建网站   宁安市一键建站   宁波市如何创建网站   宁城县建站公司   宁德市建网站   宁都县一键建站   宁国市如何创建网站   宁海县建站公司   宁化县建网站   宁晋县一键建站   宁陵县如何创建网站   宁明县建站公司   宁南县建网站   宁强县一键建站   宁陕县如何创建网站   宁武县建站公司   宁乡市建网站   宁阳县一键建站   宁远县如何创建网站   农安县建站公司   磐安县建网站   盘锦市一键建站   盘山县如何创建网站   磐石市建站公司   盘州市建网站   蓬安县一键建站   澎湖县如何创建网站   蓬莱市建站公司   彭山县建网站   蓬溪县一键建站   彭阳县如何创建网站   彭泽县建站公司   彭州市建网站   偏关县一键建站   平安县如何创建网站   平昌县建站公司   平定县建网站   屏东县一键建站   平度市如何创建网站   平果县建站公司   平和县建网站   平湖市一键建站   平江县如何创建网站   平乐县建站公司   平凉市建网站   平利县一键建站   平罗县如何创建网站   平陆县建站公司   屏南县建网站   平泉市一键建站   屏山县如何创建网站   平顺县建站公司   平塘县建网站   平潭县一键建站   平武县如何创建网站   萍乡市建站公司   平乡县建网站   平阳县一键建站   平遥县如何创建网站   平阴县建站公司   平邑县建网站   平远县一键建站   平舆县如何创建网站   皮山县建站公司   普安县建网站   浦北县一键建站   浦城县如何创建网站   普洱市建站公司   普格县建网站   浦江县一键建站   普兰县如何创建网站   普宁市建站公司   莆田市建网站   迁安市一键建站   乾安县如何创建网站   潜江市建站公司   潜山市建网站  

友情链接: 自助建站 怎么自己建网站 免费网站建设 外包建站公司

Copyright © 2002-2020 建网站_一键建站_如何创建网站_建站公司_个人博客免费建站平台 版权所有 (网站地图) 备案号:粤ICP备10235580号