使用vuejs使用代码完成一个动态组件的案例如图所示Home Canteen Company家的组件当点击home时显示对应的家的组件点击canteen时显示对应的食堂的组件Home Canteen Company食堂的组件

<template>
  <div>
    <nav>
      <ul>
        <li @click="currentComponent='home'">Home</li>
        <li @click="currentComponent='canteen'">Canteen</li>
        <li @click="currentComponent='company'">Company</li>
      </ul>
    </nav>
    <component :is="currentComponent"></component>
  </div>
</template>
<script>
import Home from './Home.vue'
import Canteen from './Canteen.vue'
import Company from './Company.vue'

export default {
  data() {
    return {
      currentComponent: 'home'
    }
  },
  components: {
    Home,
    Canteen,
    Company
  }
}
</script>