component -- is 動態切換組件 · Vue&&TypeSprict--基礎總結

>[success] # component -- is 切換組件 ~~~ 1.有的時候，在不同組件之間進行動態切換，有兩種方法一種使用v-if 或者v-show 來控制組件之間的顯示切換 2.另外一種配合component標簽和v-bind 搭配is使用例如： <component v-bind:is="切換組件的名"></component> 3.簡單的說: <component> 元素，動態地綁定多個組件到它的 is 屬性 <keep-alive> 保留狀態，避免重新渲染 ~~~ <a href="https://jsfiddle.net/chrisvfritz/o3nycadu/">官方案例地址</a> >[danger] ##### 案例 -選擇不同radio展示不同組件 ~~~ 1.component 每次只能顯示一個組件，組件之間切換的時候就是銷毀之前的組件，重建新的組件這樣會浪費性能 2.想查看上面話中具體的代碼效果，可以在組件中加入聲明周期鉤子，斷點來看 3.詳解解決這類問題使用<keep-alive></keep-alive> 來解決例如下面案例可以寫成： <keep-alive> <component :is="tab"></component> </keep-alive> 4.只要切換到 A 組件，mounted 就會觸發一次，切換到其它組件， beforeDestroy 也會觸發一次，說明組件再重新渲染，這樣有可能導致性能問題。為了避免組件的重復渲染，可以在 <component> 外層套一個 Vue.js 內置的 <keep-alive> 組件，這樣，組件就會被緩存起來 5.這時，只有 mounted 觸發了，如果不離開當前頁面，切換到其它組件， beforeDestroy 不會被觸發，說明組件已經被緩存了。 ~~~ ![](https://box.kancloud.cn/8459d20048098e01c45521a0ac6f800f_234x79.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <input type="radio" v-model="tab" value="myCom1">組件一號 <input type="radio" v-model="tab" value="myCom2">組件二號  <component :is="tab"></component> </div> <template id="com1"> <p> {{title}}</p> </template> <template id="com2"> <p> {{title}}</p> </template> <script> let myCom1 = { template:'#com1', data(){ return { title:'子組件一號', } }, }; let myCom2 = { template:'#com2', data(){ return { title:'子組件二號', } }, }; var vm = new Vue({ el: '#app', data:{ tab:"myCom1" }, components:{ myCom1, myCom2, } }); </script> </body> </html> ~~~ >[danger] ##### 案例二 ![](https://box.kancloud.cn/0941980f66158a150aafcac3707a3aec_1415x258.png) ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="lib/vue.js"></script> <style> * { margin: 0px; padding: 0px; } html, body { width: 100%; height: 100%; } footer ul { display: flex; position: fixed; bottom: 0; left: 0; width: 100%; height: 40px; } ul li { flex: 1; text-align: center; list-style: none; height: 40px; line-height: 40px; background: gray; } </style> </head> <body> <div id="app"> <keep-alive> <component :is="who"></component> </keep-alive> <footer> <ul> <li><a @click="who='first'">首頁</a></li> <li><a @click="who='second'">中間頁</a></li> <li><a @click="who='third'">尾頁</a></li> </ul> </footer> </div> <template id="first"> <div> 首頁<input> </div> </template> <template id="second"> <div> 中間頁 </div> </template> <template id="third"> <div> 尾頁 </div> </template> <script type="text/javascript"> var first = { template: "#first", methods: {} } var second = { template: "#second", methods: {} } var third = { template: "#third", methods: {} } var vm = new Vue({ el: "#app", data: { who: 'first' }, components: { first, second, third, } }) </script> </body> </html> ~~~