容器里根据条件动态渲染不同的组件

<template>
  <div class="home-content">
    <component :is="componentVal"></component>
  </div>
</template>

<script>
import HomeOne from ‘./test/HomeOne‘
import HomeTwo from ‘./test/HomeTwo‘
import { ref } from ‘vue‘

export default {
  components: {
    HomeOne,
    HomeTwo
  },
  setup () {
    const componentVal = ref(‘HomeTwo‘)
    return {
      componentVal
    }
  }
}
</script>

<style>
</style>