动态组件

//1.定义组件
//2.引入组件和data关联
<template>
  <div>
    <button @click="handleToggle">toggle</button>
    <component :is="isToggle?one:two"></component>
  </div>
</template>
<script>
import One from "../components/One.vue";
import Two from '../components/Two.vue'
export default {
  data() {
    return {
      isToggle:false,
      one: "One",
      two:"Two"
    };
  },
  components: {
    One,
    Two
  },
  methods:{
      handleToggle(){
          this.isToggle = !this.isToggle
      }
  }
};
</script>