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> ~~~