一篇文章彻底理解并学会 Vue 的 "动态组件"

在Vue中我们可以通过动态组件实现在多个组件之间进行切换。会用到的技术点是：

<!--组件占位符-->
<component></component>

<!-- 根据:is 指定组件名称，将对应的组件渲染到组件占位符中 -->
<component :is='xxx'></component>

首先看下面的例子：

    <div id="test">
        <div class="head">
            <button @click="changeCity('meiguo')" type="button">美国</button>
            <button @click="changeCity('faguo')" type="button">法国</button>
            <button @click="changeCity('yindu')" type="button">印度</button>
        </div>
        <!-- 将对应的组件渲染到这面 -->
        <component :is="currentCity"></component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#test',
            data: {
                currentCity: 'meiguo'
            },
            methods: {
                changeCity: function(cityName){
                    this.currentCity = cityName;
                }
            },
            components: {
                meiguo: {
                    template: `<div class="body">我是美国</div>`
                },
                faguo: {
                    template: `<div class="body">我是英国</div>`
                },
                yindu: {
                    template: `<div class="body">我是印度</div>`
                }
            }
        })
    </script>

动态组件的缓存

默认情况下，切换动态组件，会重新渲染，这不仅会带来性能问题，同时也不能保持组件的状态，比如我们看下面这个例子：

    <div id="test">
        <div class="head">
            <button @click="changeCity('meiguo')" type="button">美国</button>
            <button @click="changeCity('faguo')" type="button">法国</button>
            <button @click="changeCity('yindu')" type="button">印度</button>
        </div>
        <!-- 将对应的组件渲染到这面 -->
        <component :is="currentCity"></component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#test',
            data: {
                currentCity: 'meiguo'
            },
            methods: {
                changeCity: function(cityName){
                    this.currentCity = cityName;
                }
            },
            components: {
                zhengzhou: {
                    template: `<div class="body">我是美国，您是谁啊？<input type='text'></div>`
                },
                luoyang: {
                    template: `<div class="body">我是法国，您是谁啊？<input type='text'></div>`
                },
                kaifeng: {
                    template: `<div class="body">我是印度，您是谁啊？<input type='text'></div>`
                }
            }
        })
    </script>

我们可以看到，如果我在一个组件中输入内容，然后切换到其他组件后在切换回来，我们之前输入的内容则不能被保存。如果我们想保留组件的状态的话，可以使用动态组件的缓存。使用起来也比较简单，只需在组件占位符的外面包一层<keep-alive></keep-alive> 标签即可。

<keep-alive>
		<component :is="currentCity"></component>
</keep-alive>

keep-alive 的属性

keep-alive 目前支持3个属性

1. exclude ：名称匹配的组件不会被缓存，其值可以是字符串或者正则表达式

   <keep-alive exclude="meiguo">
     	<!--除了名字叫zhengzhou的都会被缓存-->
     	<component :is="currentCity"></component>
   </keep-alive>
   

2. include：只有名称匹配的组件会被缓存，其值可以是字符串或者正则表达式

   <keep-alive include="faguo">
       <!--只有名字叫luoyang的才会被缓存-->
     	<component :is="currentCity"></component>
   </keep-alive>
   

3. max：最多可以缓存多少个组件，其值是数字

   <keep-alive max="2">
     	<!--最多缓存最近的2个组件-->
     	<component :is="currentCity"></component>
   </keep-alive>
   

注意事项：

1. 值为正则表达式的时候，必须使用v-bind进行绑定

   <keep-alive :include="/o/">
     	<component :is="currentCity"></component>
   </keep-alive>
   

2. exclude 比 include 的优先级高，不支持字符串和正则

   <keep-alive :include="/o/" exclude="meiguo">
     	<component :is="currentCity"></component>
   </keep-alive>
   

3. 需要匹配多个组件名称的时候，可以使用英文逗号，且中间不能有空格

   <keep-alive include="meiguo,yindu">
     	<component :is="currentCity"></component>
   </keep-alive>
   

Vue官网教程：动态组件