动态组件

动态组件学习:
一 新增两个组件FromOne FromTwo分别引入
二 利用comonent中绑定:is=“这里面是在return里面定义的组件名称,这边默认显示的是from-one”
三 两个button分别点击 @click=“component=‘fromone’”
@click=“component=‘from-one’”

<template>
  <div class="home">
   <component :is="component"></component>
   <Button @click="component='from-one'">From one</Button>
   <Button @click="component='from-two'">From two</Button>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import FromOne from './FromOne'
import FromTwo from './FromTwo'
export default {
  name: "home",
  components: {
    // HelloWorld
   "from-one": FromOne,
   "from-two": FromTwo
  },
  data(){
    return {
      component: 'from-one'
    }
  }
};
</script>