vue中的动态组件

约定不等于承诺〃 2022-04-16 02:00 259阅读 0赞

1. 动态组件是由vue内置标签component上的is属性确定的，**is属性的值，就是组件的名字**

第二种方法，**用v-for，需要注意的是，type的值只是用来做标识的**

<div id="app">
            <component :is="type"></component>
           
           <button @click="toggle">click me</button>
        </div>
        <script>    
            Vue.component( 'child-one', {
                template: `<div>child-one</div>`,
            })
            Vue.component('child-two', {
                template: `<div>child-two</div>`
            })
            var vm = new Vue({
                el: '#app',
                data: {
                    type: 'child-one'
                },
                methods: {
                    toggle(){
                        this.type = (this.type === 'child-one' ? this.type = 'child-two' : this.type = 'child-one')
                    }
                }
            })
        </script>

![20181115155923779.png][]

同时要注意：局域组件好像不可以实现动态组件，刚用局域组件写的时候，总是报错

**上述的切换存在一定的问题：组件一和组件二来回切换的过程，底层原理是：销毁一个创建一个，然后点击切换的过程中其实就是销毁和创建的切换，这样非常浪费性能**

**（1）知识点：v-once，作用：带有v-once指令的标签，会缓存，这样下次调用该标签的时候，直接去缓存中取**

<div id="app">
            
           <child-one v-if="type === 'child-one'"></child-one>
           <child-two v-if="type === 'child-two'"></child-two>
           <button @click="toggle">click me</button>
        </div>
        <script>    
            Vue.component( 'child-one', {
                template: `<div v-once>child-one</div>`,
            })
            Vue.component('child-two', {
                template: `<div v-once>child-two</div>`
            })
            var vm = new Vue({
                el: '#app',
                data: {
                    type: 'child-one'
                },
                methods: {
                    toggle(){
                        this.type = (this.type === 'child-one' ? this.type = 'child-two' : this.type = 'child-one')
                    }
                }
            })
        </script>

**（2）可以通过<keep-alive>标签来缓存动态组件**

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

[20181115155923779.png]: /images/20220416/085abefac2354e348b72027344dc63a0.png