源自:https://cn.vuejs.org/v2/guide/index.html
動態組件
<!-- 失活的組件將會被緩存!--> (keep-alive)
<keep-alive>
????????????<component v-bind:is="currentTabComponent"></component>
</keep-alive>
異步組件
Vue 只有在這個組件需要被渲染的時候才會觸發該工廠函數,且會把結果緩存起來供未來重渲染。
new Vue({
? // ...
? components: {
? ? 'my-component': () => import('./my-async-component')
? }
})
處理加載狀態
const AsyncComponent = ()=> ({
????????? // 需要加載的組件 (應該是一個 `Promise` 對象)
?????????component: import('./MyComponent.vue'),
????????? // 異步組件加載時使用的組件??
????????loading: LoadingComponent,
????????? // 加載失敗時使用的組件??
????????error: ErrorComponent,
? ????????// 展示加載時組件的延時時間。默認值是 200 (毫秒)??
????????delay: 200,
? ????????// 如果提供了超時時間且組件加載也超時了,? // 則使用加載失敗時使用的組件。默認值是:`Infinity`??
????????timeout: 3000
})
注意:
$refs?只會在組件渲染完成之后生效,并且它們不是響應式的。這僅作為一個用于直接操作子組件的“逃生艙”——你應該避免在模板或計算屬性中訪問?$refs。