Vue动态组件demo

<div id="dynamic-component-demo" class="demo">
      <button 
      v-for="(tab,index) in tabs"
      v-bind:key="index"
      v-bind:class="['tab-button',{acitve:currentTab === tab}]"
      v-on:click="currentTab = tab"
      >
        {{ tab }}
      </button>
      <component :is="currentTabComponent"></component>
    </div>



    <div id="dy-component-two">
      <button
        v-for="tab in tabs"
        v-bind:key="tab.name"
        v-bind:class="['tab-button',{ active: currentTab.name === tab.name}]"
        v-on:click="currentTab = tab"
      >
        {{ tab.name }}
      </button>
      <component :is="currentTab.component"></component>
    </div>


script:
 var tabs = [
        {
          name:"Home",
          component:{
            template:'  <div>Home component 1111 </div> '
          }
        },
        {
          name:"Posts",
          component:{
            template:'<div>Posts component 2222</div>'
          }
        },{
          name:"Archive",
          component:{
            template:'<div>Archive component 3333 </div>'
          }
        }
      ]

        new Vue({
          el:'#dy-component-two',
          data:{
            tabs:tabs,
            currentTab:tabs[0]
          }
        })


      Vue.component('tab-home',{
        template:`
          <div>Home component</div>
        `
      })
      Vue.component('tab-posts',{
        template:`<div>Posts component</div>`
      })
      Vue.component('tab-archive',{
        template:`<div>Archive component</div>`
      })

      new Vue({
        el: "#dynamic-component-demo",
        data: {
          tabs: ["Home", "Posts", "Archive"],
          currentTab: "Home"
        },
        computed:{
          currentTabComponent:function(){
            return "tab-"+this.currentTab.toLowerCase();
          }
        }
      });

已注册组件的名字，或
一个组件的选项对象