溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“Vue動態組件與異步組件怎么使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue動態組件與異步組件怎么使用”文章吧。
動態組件是根據數據的變化，可以隨時切換不同的組件，比如咱們現在要展示一個文本框和輸入框，我們想要根據我們data中定義的值去決定是顯示文本框還是輸入框，如果用以前學的知識去做的話就是使用v-show的方式去做，雖然也能實現，但是比較復雜，代碼也多了很多，這時候用動態組件能很好的解決這個問題
異步組件可以以異步的方式加載組件，實際項目中我們可以把大型的項目拆分成許多小js文件，等使用時再組合，而且可以實現懶加載，有些組件暫時不需要展示給用戶的我們可以等用戶看到時再加載進來。
展示一個輸入框或者文本，通過一個按鈕，點擊后可以切換展示，比如當前展示文本，點擊按鈕就會變為展示輸入框，代碼如下：
首先我們先定義兩個組件，一個展示輸入框，一個展示文本
app.component('input-item',{
template:`
<input />
`
});
app.component('common-item',{
template:`<div>hello world</div>`
});定義一個currentItem變量用于控制組件的展示
data() {
return {
currentItem: 'input-item'
}
},使用組件時使用component關鍵字 ，然后使用:is = "顯示具體組件的依賴數據（本例子中時currentItem）"的方式動態加載組件
template: ` <keep-alive> <component :is="currentItem"/> </keep-alive> <button @click="handleClick">switch</button> `
keep-alive:組件切換時在組件中的值會被清掉，比如輸入框中的值，所以需要使用keep-alive來防止值被清理
定義點擊按鈕后執行的方法，這個方法就是改變current Item的值，讓其顯示不同的組件
methods: {
handleClick(){
if(this.currentItem === 'input-item'){
this.currentItem = 'common-item';
}else{
this.currentItem = 'input-item';
}
}
}所有代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動態組件</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
currentItem: 'input-item'
}
},
methods: {
handleClick(){
if(this.currentItem === 'input-item'){
this.currentItem = 'common-item';
}else{
this.currentItem = 'input-item';
}
}
},
template:
`
<keep-alive>
<component :is="currentItem"/>
</keep-alive>
<button @click="handleClick">switch</button>
`
});
app.component('input-item',{
template:`
<input />
`
});
app.component('common-item',{
template:`<div>hello world</div>`
});
const vm = app.mount('#root');
</script>
</html>假如我們要展示一個文本，這個文本不會馬上展示，而是4秒后再展示
首先定義兩個組件，一個同步組件，一個異步組件
定義同步組件
app.component('common-item',{
template:`<div>hello world</div>`
})定義異步組件，使用Vue.defineAsyncComponent定義異步組件
app.component('async-common-item',
Vue.defineAsyncComponent(()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve({
template:`<div>this is an async component</div>`
})
},4000)
})
}));使用組件
const app = Vue.createApp({
template:
`
<div>
<common-item />
<async-common-item />
</div>
`
});全部代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>異步組件</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template:
`
<div>
<common-item />
<async-common-item />
</div>
`
});
app.component('common-item',{
template:`<div>hello world</div>`
})
// 異步組件：可以通過異步組件的方式動態加載組件，可以把大型項目拆分成許多的小js 文件，使用時再組合
app.component('async-common-item',
Vue.defineAsyncComponent(()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve({
template:`<div>this is an async component</div>`
})
},4000)
})
}));
const vm = app.mount('#root');
</script>
</html>以上就是關于“Vue動態組件與異步組件怎么使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
