Vue动态组件 ＜component :is=“XXX“＞＜/component＞

动态组件：不同组件之间进行动态切换，通过 Vue 的 元素加一个特殊的 is attribute 实现 

currentPage可以包括已注册组件的名字，或一个组件的选项对象

注意，这个 attribute 可以用于常规 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute 都会作为 DOM attribute 被绑定。如 a标签 <component is="a" href="XXX.baidu.com"></component>

    <script>

        Vue.component("home", {
            template: `
            <div style="padding:10px">
                / 首页   
            </div>
        `
        })

        Vue.component("server", {
            template: `
            <div style="padding:10px">
                / 服务    
            </div>
        `
        })

        Vue.component("about", {
            template: `
            <div style="padding:10px">
                / 关于
            </div>
        `
        })

        new Vue({
            el: "#app",
            data() {
                return {
                    currentPage: 'home',
                    // 导航nav
                    nav: [{ title: '首页', id: 'home' }, { title: '服务', id: 'server' }, { title: '关于', id: 'about' }],
                }
            },
            methods: {
                changePage(itemId) {
                    this.currentPage = itemId;
                }
            }
        })
    </script>