vue中動態元件的使用
阿新 • • 發佈：2019-01-27
動態元件的使用
雖然vue 已經提供了 v-if v-show來動態顯示隱藏元件
同時也提供<component>元素在一個掛載點上動態的切換元件，通過is來決定那個元件被渲染顯示
配合 <keep-alive>使用時，可以保留元件狀態避免重新渲染（和v-show 比較的差別是v-show 是一開始就渲染的所有元件，而keep-alive 並不是一開始就渲染好所有元件，而已保留渲染過的元件）
示例如下：
<body> <div id="app"> <component v-bind:is="show"></component> <button v-on:click="changeShow">change show</button> </div> </body> <script> var app=new Vue({ el:'#app', data:{ show:'tem1' }, components:{ tem1:{ template:'<div>11111111111</div>' }, tem2:{ template:'<div>22222</div>' }, tem3:{ template:'<div>333333</div>' } }, methods:{ changeShow:function(){ if(this.show=='tem1'){ this.show='tem2' }else if(this.show=='tem2'){ this.show='tem3' }else{ this.show='tem1' } } } }) </script>
點選change show 會依次切換元件顯示
加入<keep-alive>
<body> <div id="app"> <keep-alive> <component v-bind:is="show"></component> </keep-alive> <button v-on:click="changeShow">change show</button> </div> </body> <script> var app=new Vue({ el:'#app', data:{ show:'tem1' }, components:{ tem1:{ template:'<div>11111111111</div>' }, tem2:{ template:'<div>22222</div>' }, tem3:{ template:'<div>333333</div>' } }, methods:{ changeShow:function(){ if(this.show=='tem1'){ this.show='tem2' }else if(this.show=='tem2'){ this.show='tem3' }else{ this.show='tem1' } } } })
可以看到keep-alive 自身不會渲染成dom,並且對於減小的元件沒有明顯的顯示渲染優化作用，所有推薦使用環境應該是較大頁面頻繁切換的情景下
需要注意的是component 中可以新增id 但是不能新增class