vue中使用非同步元件的步驟

1. 在components屬性中引入元件
2. 在template中使用元件

<template>
	<div id="app">
		<div>
			<h1>
				Vue中非同步元件的使用
			</h1>
			<button @click="show = !show">
				切換元件
			</button>
			<div v-if="show">
				<list></list>
			</div>
		</div>
	</div>
</template>
 

	export default {
	  name: 'App',
	  data () {
		return {
		  show: false
		}
	  },
	  components: {
		// 此處的webapckChunckName為webpack方法，值為引入js檔案的name【List】
		List: () => import(/* webpackChunkName:"List" */ './components/List.vue')
	  },
	  methods:{
	  }
	}

Vue中使用元件中更細緻的方法

1. 定義非同步元件工廠函式
2. 匯入需要的元件
3. 使用非同步元件

<template>
	<div id="app">
		<div>
			<h1>
				Vue中非同步元件的使用
			</h1>
			<button @click="show = !show">
				切換元件
			</button>
			<div v-if="show">
				<AsyncList></AsyncList>
			</div>
		</div>
	</div>
</template>

import LoadingComponent from './components/LoadingComponent.vue'
import ErrorComponent from './components/ErrorComponent.vue'
const AsyncList = () => ({
  component: import(/* webpackChunkName:"List" */ './components/List.vue'),
  // 載入的過程中使用loading元件
  loading: LoadingComponent,
  // 錯誤的狀態
  error: ErrorComponent,
  // 載入元件的延遲時間，即loading元件展示時間
  delay: 200,
  // 延遲3s如果非同步元件還未載入成功，則顯示error元件
  timeout: 3000
})
export default {
  name: 'App',
  data () {
    return {
      show: false
    }
  },
  components: {
    AsyncList
  }
}
 

#app {
  width: 600px;
  height: 500px;
  margin: 200px auto;
  border: 1px solid greenyellow;
  border-radius: 5px;
  text-align: center;
}
#app h1 {
  font-size: 20px;
  color: yellowgreen;
  padding-bottom: 20px;
  border-bottom: 1px dashed #ccc;
}
#app button {
  margin: 20px 0;
}