【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