Vue2.x之动态组件

动态组件是Vue语法中用于快速切换Vue组件的。语法为：

<component :is="page"></component>

page为data中的一个变量，当page的值与组件名相同时，框架便会自动渲染该组件。我们通过改变page变量的值，就可以达到快速切换不同的Vue组件。

 

    <div id="app">
        <button @click="toggle">动态组件</button>
        <!-- 动态组件语法格式 -->
        <component :is="page"></component>
    </div>

    <script src="../vue.js"></script>
    <script>
        // Vue.extend使用基础Vue构造器创建一个子类构造器。参数是一个包含数组选项的对象。
        // Vue.extend在业务开发中使用的不多，它会用于开发全局组件

        // 创建组件Home
        let Home = Vue.extend({
            template: '<h1>Home page</h1>'
        })
        
        // 创建组建List
        let List = Vue.extend({
            template: '<h1>LIST PAGE</h1>'
        })

        // 全局注册组件
        Vue.component('Home', Home)
        Vue.component('List', List)

        let app = new Vue({
            // 局部注册组件
            components: {
                Home, List
            },
            el: '#app',
            data: {
                page: 'Home'
            },
            methods: {
                toggle() {
                    if (this.page == 'Home') {
                        this.page = 'List'
                    } else {
                        this.page = 'Home'
                    }
                }
            }
        })
    </script>