vue动态组件

动态组件通过component组件实现，这个组件有一个is属性，is属性的值是谁，它就会展示哪个组件

<div id="app">
      <button @click="currentCom = 'index'">首页</button>
      <button @click="currentCom = 'product'">蔬菜</button>
      <button @click="currentCom = 'product'">水果</button>
      <button @click="currentCom = 'product'">肉类</button>
      <!-- 动态组件通过component组件实现，这个组件有一个is属性，is属性的值是谁，它就会展示哪个组件 -->
      <component :is="currentCom"></component>
    </div>

<script>

      Vue.component('index', {
        template: '<div>这是首页</div>'
      })
      Vue.component('product', {
        template: '<div>这是蔬菜/水果/肉类</div>'
      })

      var vm = new Vue({
        el: '#app',
        data: {
          currentCom: 'index'
        }
      })
    </script>