动态组件

1、基本用法

<template>
  <div class="container">
    <component is="First"></component>
    <component is="Last"></component>
  </div>
</template>

<script>
// 导入组件
import First from '@/components/First.vue';
import Last from '@/components/Last.vue';

export default {
  // 注册组件
  components: {
    First, 
    Last
  }
}
</script>

<style>

</style>

2、切换组件

<template>
  <div class="container">
    <!-- 使用属性绑定指令将指定的数据绑定到属性中 -->
    <component :is="show"></component>
    <button @click="transfer()">Transfer</button>
  </div>
</template>

<script>
// 导入组件
import First from '@/components/First.vue';
import Last from '@/components/Last.vue';

export default {
  // 定义数据
  data() {
    return {
      show: 'First'
    }
  },
  // 注册组件
  components: {
    First, 
    Last
  },
  // 定义事件处理函数
  methods: {
    transfer() {
      if(this.show === 'First'){
        this.show = 'Last';
      }else{
        this.show = 'First';
      }
    }
  }
}
</script>

<style>

</style>