动态组件

VUE给我们提供 了一个元素叫component
作用是： 用来动态的挂载不同的组件
实现：使用is特性来进行实现的

  <div id="app">
    <button @click="switchComp('A')">首页 -- 点我显示A 组件 </button>
    <button @click="switchComp('B')">推荐页 -- 点我显示B 组件</button>
    <button @click="switchComp('C')">搜索 -- 点我显示 C 组件</button>
    <button @click="switchComp('D')">点我显示 D组件 </button>
    <component :is="currentComp"></component>  <!--  is  -->
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('componentA', {
      template: '<div>你好呀~ 欢迎来到首页 ~~ </div>'
    });
    Vue.component('componentB',{
      template: '<div>你好呀~  欢迎来到推荐页 ~~ </div>'
    });
    Vue.component('componentC',{
      template: '<div> 你好呀~  欢迎来到搜索页 ~~ </div>'
    })
    let componentD = {
      template: '<div>D</div>'
    }
  let app = new Vue({
    el: '#app',
    components: { componentD },
    data: {
      currentComp: 'componentA'
    },
    methods: {
      switchComp(tag) {
        this.currentComp = 'component' + tag
      }
    } 
  })
  </script>