vue——动态组件

ゞ浴缸里的玫瑰 2021-09-14 12:58 423阅读 0赞

通过使用保留的 `<component>` 元素，动态地绑定到它的 `is` 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名" 中的组件名去自动匹配组件，如果匹配不到则不显示。

改变挂载的组件，只需要修改is指令的值即可。

![20171227194144226][]

**\#keep-alive**

动态切换掉的组件（非当前显示的组件）是被移除掉了，如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 `keep-alive` 指令参数：

说明：

初始情况下，vm.$children属性中只有一个元素（first组件），

点击按钮切换后，vm.$children属性中有两个元素，

再次切换后，则有三个元素（三个子组件都保留在内存中）。

之后无论如何切换，将一直保持有三个元素。

### actived钩子 ###

可以延迟执行当前的组件。

具体用法来说，activate是和template、data等属性平级的一个属性，形式是一个函数，函数里默认有一个参数，而这个参数是一个函数，执行这个函数时，才会切换组件。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 动态组件</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
    	<button @click='toShow'>点击显示子组件</button>
    	
    	<keep-alive>
    	<component v-bind:is="which_to_show" ></component>
    	</keep-alive>
    </div>
    
    <script>
    
    // 创建根实例
    var vm = new Vue({  
            el: '#app',  
            data: {  
                which_to_show: "first"  
            },  
            methods: {  
                toShow: function () {   //切换组件显示  
                    var arr = ["first", "second", "third", ""];  
                    var index = arr.indexOf(this.which_to_show);  
                    if (index < 2) {  
                        this.which_to_show = arr[index + 1];  
                    } else {  
                        this.which_to_show = arr[0];  
                    }  
                   console.log(this.$children);  
                }  
            },  
            components: {  
                first: { //第一个子组件  
                    template: "<div>这里是子组件1</div>"  
                },  
                second: { //第二个子组件  
                    template: "<div>这里是子组件2，这里是延迟后的内容：{
       {hello}}</div>",  
                    data: function () {  
                        return {  
                            hello: ""  
                        }  
                    },  
                    activated: function (done) { //执行这个参数时，才会切换组件  
    					console.log('hhh')
                        var self = this; 
    					var startTime = new Date().getTime(); // get the current time   
    					//两秒后执行
                        while (new Date().getTime() < startTime + 2000){
    						self.hello='我是延迟后的内容';
    					}
    					
                    }  
                },  
                third: { //第三个子组件  
                    template: "<div>这里是子组件3</div>"  
                }  
            }  
        });  
    </script>
    </body>
    </html>

![20171227210135643][]  
当切换到第二个组件的时候，会先执行activated钩子，会在两秒后显示组件2.起到了延迟加载的作用。

[20171227194144226]: /images/20210813/7556507ec61b4ebca888dcbf578c348b.png
[20171227210135643]: /images/20210813/b08c9433eb904fa8ba6a5073b1ff15f8.png