vue——动态组件-蒲公英云

vue——动态组件

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

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

<!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>
    <component v-bind:is="which_to_show"></component>
</div>
<script>
// 创建根实例
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];
            }
        }
    },
    components:{
        first:{
            template:'<div>这是子组件1<div>'
        },
        second:{
            template:'<div>这是子组件2<div>'
        },
        third:{
            template:'<div>这是子组件3<div>'
        },
    }
})
</script>
</body>
</html>

20171227194144226

#keep-alive

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

<!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> <!----或者<component v-bind:is="which_to_show" keep-alive></component>也行-----> <keep-alive> <component v-bind:is="which_to_show" ></component> </keep-alive> </div> <script> // 创建根实例 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<div>' }, third:{ template:'<div>这是子组件3<div>' }, } }) </script> </body> </html>

说明：

初始情况下，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>
    <!----或者<component v-bind:is="which_to_show" keep-alive></component>也行----->
    <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>