8.动态组件

1.定义子组件

//components/One.vue
<template>
    <div>
        one
    </div>
</template>
<script>
    export default {
    }
</script>
<style scoped>
</style>
//components/Two.vue
<template>
    <div>
       two
    </div>
</template>
<script>
    export default {
    }
</script>
<style scoped>
</style>

2.引入组件和data关联

使用:is is后面跟的one,two要在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>