vue 動態元件用法示例小結
阿新 • • 發佈：2020-03-07
本文例項講述了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',"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);
}
},}
})
</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","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程式設計有所幫助。