溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關Vue中怎么實現一個異步組件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Document</title>
<script>
// 如果瀏覽器不支持Promise就加載promise-polyfill
if ( typeof Promise === 'undefined' ) {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js';
document.head.appendChild( script );
}
</script>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app" >
<!-- 異步組件async-comp -->
<async-comp :list="['我是一個異步組件，','如果加載完成，','我就會在這里顯示']"></async-comp>
</div>
<!-- 引入main.js -->
<script src="/main.js"></script>
</body>
</html>異步組件Async-Comp.js，
注意，Async-Comp.js并沒有在index.html中引用，而是在下面的main.js中動態加載。
window.async_comp = {
template: '\
<ol>\
<li v-for="item in list">{{ item }}</li>\
</ol>',
props: {
list: Array
}
};main.js
var vm = new Vue( {
el: '#app',
components: {
/* 異步組件async-comp */
'async-comp': function () {
return {
/** 要渲染的異步組件，必須是一個Promise對象 */
component: new Promise( function ( resolve, reject ) {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = '/Async-Comp.js';
document.head.appendChild( script );
script.onerror = function () {
reject( 'load failed!' );
}
script.onload = function () {
if ( typeof async_comp !== 'undefined' )
resolve( async_comp );
else reject( 'load failed!' )
}
} ),
/* 加載過程中顯示的組件 */
loading: {
template: '<p>loading...</p>'
},
/* 出現錯誤時顯示的組件 */
error: {
template: '\
<p >load failed!</p>\
'
},
/* loading組件的延遲時間 */
delay: 10,
/* 最長等待時間，如果超過此時間，將顯示error組件。 */
timeout:3200
}
}
}
} )看完上述內容，你們對Vue中怎么實現一個異步組件有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
