溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了vue 動態組件用法。分享給大家供大家參考，具體如下：
通過使用保留的 <component> 元素，動態地綁定到它的 is 特性，我們讓多個組件可以使用同一個掛載點，并動態切換。根據 v-bind:is="組件名" 中的組件名去自動匹配組件，如果匹配不到則不顯示。
改變掛載的組件，只需要修改is指令的值即可。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 動態組件</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <button @click='toShow'>點擊顯示子組件</button> <component v-bind:is="which_to_show"></component> </div> <script> // 創建根實例 new Vue({ el: '#app', data:{ which_to_show:'first' }, methods:{ toShow:function(){ var arr = ["first","second","third"]; var index = arr.indexOf(this.which_to_show); if(index<2){ this.which_to_show = arr[index+1]; }else{ this.which_to_show = arr[0]; } } }, components:{ first:{ template:'<div>這是子組件1<div>' }, second:{ template:'<div>這是子組件2<div>' }, third:{ template:'<div>這是子組件3<div>' }, } }) </script> </body> </html>
#keep-alive
動態切換掉的組件（非當前顯示的組件）是被移除掉了，如果把切換出去的組件保留在內存中，可以保留它的狀態或避免重新渲染。為此可以添加一個 keep-alive 指令參數：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 動態組件</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click='toShow'>點擊顯示子組件</button>
<!----或者<component v-bind:is="which_to_show" keep-alive></component>也行----->
<keep-alive>
<component v-bind:is="which_to_show" ></component>
</keep-alive>
</div>
<script>
// 創建根實例
new Vue({
el: '#app',
data:{
which_to_show:'first'
},
methods:{
toShow:function(){
var arr = ["first","second","third"];
var index = arr.indexOf(this.which_to_show);
if(index<2){
this.which_to_show = arr[index+1];
}else{
this.which_to_show = arr[0];
} console.log(this.$children);
}
},
components:{
first:{
template:'<div>這是子組件1<div>'
},
second:{
template:'<div>這是子組件2<div>'
},
third:{
template:'<div>這是子組件3<div>'
},
}
})
</script>
</body>
</html>
說明：
初始情況下，vm.$children屬性中只有一個元素（first組件），
點擊按鈕切換后，vm.$children屬性中有兩個元素，
再次切換后，則有三個元素（三個子組件都保留在內存中）。
之后無論如何切換，將一直保持有三個元素。
actived鉤子
可以延遲執行當前的組件。
具體用法來說，activate是和template、data等屬性平級的一個屬性，形式是一個函數，函數里默認有一個參數，而這個參數是一個函數，執行這個函數時，才會切換組件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 動態組件</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click='toShow'>點擊顯示子組件</button>
<!----或者<component v-bind:is="which_to_show" keep-alive></component>也行----->
<keep-alive>
<component v-bind:is="which_to_show" ></component>
</keep-alive>
</div>
<script>
// 創建根實例
var vm = new Vue({
el: '#app',
data: {
which_to_show: "first"
},
methods: {
toShow: function () { //切換組件顯示
var arr = ["first", "second", "third", ""];
var index = arr.indexOf(this.which_to_show);
if (index < 2) {
this.which_to_show = arr[index + 1];
} else {
this.which_to_show = arr[0];
}
console.log(this.$children);
}
},
components: {
first: { //第一個子組件
template: "<div>這里是子組件1</div>"
},
second: { //第二個子組件
template: "<div>這里是子組件2，這里是延遲后的內容：{{hello}}</div>",
data: function () {
return {
hello: ""
}
},
activated: function (done) { //執行這個參數時，才會切換組件
console.log('hhh')
var self = this;
var startTime = new Date().getTime(); // get the current time
//兩秒后執行
while (new Date().getTime() < startTime + 2000){
self.hello='我是延遲后的內容';
}
}
},
third: { //第三個子組件
template: "<div>這里是子組件3</div>"
}
}
});
</script>
</body>
</html>
當切換到第二個組件的時候，會先執行activated鉤子，會在兩秒后顯示組件2.起到了延遲加載的作用。
希望本文所述對大家vue.js程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
