vue动态组件的使用

1，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 A from './components/A'
import B from './components/B'
import C from './components/C'

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