动态组件使用的记录

动态组件的使用，就是采用保留组件component的is属性来动态加载组件
<template>
  <div>
    <button @click = 'tabComponent' class = 'btn'>动态组件</button>
    <component v-bind:is="currComponent"></component>
  </div>
</template>
<script>
import DynComponent1 from '../views/DynamicComponent_1'
import DynComponent2 from '../views/DynamicComponent_2'
var arr = []
export default {
  name: 'BasicLayout',
  data () {
    return {
      currComponent: 'DynComponent1',
      arr: ['DynComponent1', 'DynComponent2']
    }
  },
  components: {
    DynComponent1,
    DynComponent2
  },
  methods: {
    tabComponent: function () {
      if (this.currComponent === this.arr[0]) {
        this.currComponent = this.arr[1]
        console.log(this.currComponent)
      } else {
        this.currComponent = this.arr[0]
        console.log(this.currComponent)
      }
    }
  }
}
</script>

<style scoped>
.btn {
  width:100px;
  height: 30px;
}
</style>