vue 動態組件用法示例小結
本文實例講述了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程序設計有所幫助。
相關文章：
網公網安備