在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. excludeinclude 的优先级高,不支持字符串和正则

    <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官网教程:动态组件

Logo

前往低代码交流专区

更多推荐