【vue笔记】动态组件和异步组件

异步组件

// 异步组件模式
Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

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

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

// 注册路由的时候会有这么一条语句，实际上是注册异步组件，
// `import` 函数会返回一个 `Promise` 对象
// 将异步组件和 webpack 的 code-splitting 功能一起配合使用
component: () => import(/* webpackChunkName: "index" */ './views/Index.vue')

动态组件

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

/**currentTabComponent 可以包括已注册组件的名字，或一个组件的选项对象**/

// 失活的组件将会被缓存！保存组件相应的状态
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

keep-alive