<!-- 當(dāng) `currentView` 改變時(shí)，組件也跟著改變 -->
<component v-bind:is="currentView"></component>

<template>
 <div>
 　　<div>#動(dòng)態(tài)組件實(shí)現(xiàn)tab切換效果#</div><br><br><br>
 　　　　<nav>
 　　　　　　<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(first);">{{first}}</a>
   　 　　<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(second);">{{second}}</a>
   　　　 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(third);">{{third}}</a>
 　　　　</nav>

　　　　　<first :is="currentView" keep-alive></first>
　　 </div>
</template>

<script>
import first from 'components/first';
import second from 'components/second';
import third from 'components/third';

export default {
  data () {
    return {
     first: "first",
    second: "second",
    third: "third",
    currentView: 'first',
    };
   },
   components: { 
    first,
    second,
    third
   },
   methods: {
    toggleTabs (tabText) {
     this.currentView = tabText;
    }
   }
 }
</script>

components: {
 demo: () => import ( './demo.vue')
}

import Vue from 'vue';

const globalComponent = Vue.extend({
 template:"<p><a :href='url'>{{nama}}</a></p>",
 data:function(){
  return{
   nama:'某度',
   url:'http://www.moudu.com'
  }
 }
});

Vue.component('globalComponent', globalComponent);

<template>
 <globalComponent />
</template>

<template>
 <button type="button" @click="toggle('test')">動(dòng)態(tài)注冊(cè)組件<button>
 <p><div ref="currentView"></div>
</template>

<script>
import Vue from 'vue'

export default {
 data(){
 return {}
 },
 methods: {
 toggle(componentName){
  this.registerComponent(componentName).then(Component => {
  // new Component().$mount(this.$refs.currentView)

  new Component({
   el: this.$refs.currentView
  })
  })
 },
 registerComponent(componentName) {
  return import(`@/views/${componentName}.vue`).then(component => {
  return Vue.extend(component.default);
  });
 }
 },
}
</script>