Vuejs 动态组件

http://www.cnblogs.com/-ding/p/6339740.html

①简单来说：

就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。

 

②动态切换：

在挂载点使用component标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示；

 

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

 

如示例代码：

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

说明：

点击父组件的按钮，会自动切换显示某一个子组件（根据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属性中有两个元素，

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

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