vue-cli 工程中 动态组件 使用

参考文档 is 属性和内置组件 component


代码实例:

在父组件中 我现在在 app.vue中

//首先准备你的切换的组件

<template>
  <div id="app">
    <!-- vue.js提供了一个特殊元素 component 用来动态挂载组件 使用is特性来选择挂载的组件-->
    <component :is="current"></component>

    <button @click="cur('A')">切换到A</button>
    <button @click="cur('B')">切换到B</button>
    <button @click="cur('C')">切换到C</button>

  </div>
</template>
<script>

import three from './components/three'
import A from './components/A'
import B from './components/B'
import C from './components/C'

export default {
  components:{
    three,A,B,C
  },
  data(){
    return{
      current:'A'
    }
  },
  methods:{
    cur(s){
      console.log(s)
      this.current = s
    }
  }
}
</script>

A.vue B.vue C.vue 自己根据需求改
，这里只贴一个模板

<template>
    <div>
        A组件
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>

</style>