vue.js动态组件（:is特性）

vue.js动态组件（:is特性）

• 什么是动态组件：
  就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。
• 动态切换：（:is后面的是对应的组件名，必须一致）
  在挂载点使用component标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示；
  改变挂载的组件，只需要修改is指令的值即可

<div id="app">  
    <button @click="toshow">点击让子组件显示</button>  
    <component  :is="which_to_show"></component>  
</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 < 3) {  
                    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>  

例如：
 <component :is="item.type" :cumulativeData='item' :chargingData='item'></component>

结论：点击父组件的按钮，会自动切换显示某一个子组件（根据which_to_show这个变量的值来决定）

• keep-alive
  简单来说，被切换掉（非当前显示）的组件，是直接被移除了。
  在父组件中查看this.$children属性，可以发现，当子组件存在时，该属性的length为1，而子组件不存在时，该属性的length是0（无法获取到子组件）；
  假如需要子组件在切换后，依然需要他保留在内存中，避免下次出现的时候重新渲染。那么就应该在component标签中添加keep-alive属性。

<div id="app">  
    <button @click="toshow">点击让子组件显示</button>  
    <component v-bind:is="which_to_show" keep-alive></component>  
</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 < 3) {  
                    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>  

说明：
初始情况下，vm.$children属性中只有一个元素（first组件），点击按钮切换后，vm.$children属性中有两个元素，
再次切换后，则有三个元素（三个子组件都保留在内存中）。
之后无论如何切换，将一直保持有三个元素。