zoukankan      html  css  js  c++  java
  • 异步组件使用详解

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

    new Vue({
      // ...
      components: {
        'my-component': () => import('./my-async-component')
      }
    })

    这样引入的组件,只有在使用到的时候才加载

    异步组件可以解决组件之间循环引用产生的问题

    组件之间循环引用

    假设你需要构建一个文件目录树,像访达或资源管理器那样的。你可能有一个 <tree-folder> 组件,模板是这样的:

    <p>
      <span>{{ folder.name }}</span>
      <tree-folder-contents :children="folder.children"/>
    </p>

    还有一个 <tree-folder-contents> 组件,模板是这样的:

    <ul>
      <li v-for="child in children">
        <tree-folder v-if="child.children" :folder="child"/>
        <span v-else>{{ child.name }}</span>
      </li>
    </ul>

    当你仔细观察的时候,你会发现这些组件在渲染树中互为对方的后代和祖先——一个悖论!

    然而,如果你使用一个模块系统依赖/导入组件,例如通过 webpack 或 Browserify,你会遇到一个错误:

    Failed to mount component: template or render function not defined.

    为了解释这里发生了什么,我们先把两个组件称为 A 和 B。模块系统发现它需要 A,但是首先 A 依赖 B,但是 B 又依赖 A,但是 A 又依赖 B,如此往复。这变成了一个循环,不知道如何不经过其中一个组件而完全解析出另一个组件。为了解决这个问题,我们需要给模块系统一个点,在那里“A 反正是需要 B 的,但是我们不需要先解析 B。”

    在本地注册组件的时候,你可以使用 webpack 的异步 import:

    components: {
      TreeFolderContents: () => import('./tree-folder-contents.vue')
    }

    这样问题就解决了!

  • 相关阅读:
    c# 24种设计模式
    .net如何处理高并发socket,建立高性能健壮的socket服务
    对于devexpress gridview 内插图加加进度条等的一点解读
    devexpress 如何读demo源码 总结
    DevExpress之TreeList节点绑定图片
    DevExpress LookUpEdit 下拉框基本操作
    dev NavBarControl控件
    DevExpress如何实现皮肤的添加及本地化
    vs2015未能计算子级
    c#networkcomms protobuf-net 文件加载出现问题
  • 原文地址:https://www.cnblogs.com/00feixi/p/11810213.html
Copyright © 2011-2022 走看看