一、内置组件component

 

1、component简介

有的时候，在不同组件之间进行动态切换是非常有用的。这时候就需要使用动态组件。

通过 Vue 的 <component> 元素加一个特殊的 is 属性来实现，写法：

<component :is=''> </component> 多个组件使用同一个挂载点，然后动态的在他们之间切换。

 

2、代码实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>动态组件</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8 </head>
 9 <body>
10 
11     <div id="hello">
12         <button @click="flag='my-hello'">显示hello组件</button>
13         <button @click="flag='my-world'">显示world组件</button>
14 
15         <!-- 该区域动态显示组件 -->
16         <div>
17             <component :is='flag'></component>    
18         </div>
19 
20     </div>
21 
22     
23     <script>
24 
25         //vue实例
26         let vm = new Vue({    //vm其实也是一个组件，是根组件Root
27             el:'#hello',    
28             data:{
29                 flag:'my-hello'    //设置初始显示组件
30             },
31             components:{
32                 'my-hello':{
33                     template:'<h2>我是hello组件</h2>>'
34                 },
35                 'my-world':{
36                     template:'<h1>我是world组件</h1>>'
37                 }
38             }
39             
40         });
41     </script>
42 </body>
43 </html>

 

二、内置组件keep-alive

1、keep-alive简介

动态组件默认每次切换都会销毁组件并重新创建，这样会影响性能。为了解决这个问题，可以使用keep-alive组件缓存非活动组件，可以保留状态，避免重新渲染。

 

2、keep-alive使用方法

在动态显示的挂载器套上<keep-alive></keep-alive>组件即可。

 

3、代码实例

默认每次切换组件都会生成一次随机数，套上keep-alive组建后，每次动态切换就不会再重新生成随机数，只是带出上一次获取的随机数。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>动态组件</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8 </head>
 9 <body>
10 
11     <div id="hello">
12         <button @click="flag='my-hello'">显示hello组件</button>
13         <button @click="flag='my-world'">显示world组件</button>
14 
15         <!-- 该区域动态显示组件 -->
16         <div>
17             <!-- 使用keep-alive组件缓存非活动组件，可以保留状态，避免重新渲染，默认每次切换都会销毁组件并重新创建 -->
18             <keep-alive>
19                 <component :is='flag'></component>    
20             </keep-alive>
21         </div>
22 
23     </div>
24 
25     
26     <script>
27 
28         //vue实例
29         let vm = new Vue({    //vm其实也是一个组件，是根组件Root
30             el:'#hello',    
31             data:{
32                 flag:'my-hello'    //设置初始显示组件
33             },
34             components:{
35                 'my-hello':{
36                     template:'<h2>我是hello组件:{{x}}</h2>',
37                     data(){
38                         return {
39                             x:Math.random()
40                         }
41                     }
42                 },
43                 'my-world':{
44                     template:'<h1>我是world组件{{y}}</h1>',
45                     data(){
46                         return {
47                             y:Math.random()
48                         }
49                     }
50                 }
51             }
52             
53         });
54     </script>
55 </body>
56 </html>