vue component使用方法

<template>
  <div class="app">
    App.vue 我现在有 {{ total }}
    <hr />
   //点击切换名称 
    <button @click="name = 'Child'">Child</button>
    <button @click="name = 'Hi'">Hi</button>
    //is 属性绑定名称  keep-alive保留缓存状态
     <keep-alive>
      <component :is="name"></component>
    </keep-alive>
  </div>
</template>

<script>
//引入组件
import Child from "../components/HelloWorld.vue";
import Hi from "../components/hi.vue";
export default {
  data() {
    return {
      total: 10000,
      //当前组件名称
      name: "Child",
    };
  },
  components: { Child: Child, Hi },
};
</script>

<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>