[Vue] Component5 , keep-alive, dynamic component

App.vue

<template>
  <div>
    <!-- <CompLevel1></CompLevel1> -->
    <h2>Hello Component</h2>
    <!-- <button @click="clickMenu(0)">Menu1</button>
    <button @click="clickMenu(1)">Menu2</button>
    <button @click="clickMenu(2)">Menu3</button>
    <Menu1 v-if="displayMenu[0]"></Menu1>
    <Menu2 v-if="displayMenu[1]"></Menu2>
    <Menu3 v-if="displayMenu[2]"></Menu3> -->

    <button @click="activeTab = 'Menu1'">Menu1</button>
    <button @click="activeTab = 'Menu2'">Menu2</button>
    <button @click="activeTab = 'Menu3'">Menu3</button>
    <!-- 
    <Menu1 v-if="activeTab === 'Menu1'"></Menu1>
    <Menu2 v-if="activeTab === 'Menu2'"></Menu2>
    <Menu3 v-if="activeTab === 'Menu3'"></Menu3> -->
    <!-- dynamic component -->
    <!-- is에 컴포넌트 명만 넘겨주면 해당 컴포넌트가 나오게 된다! -->
    <keep-alive>
      <component :is="activeTab"></component>
    </keep-alive>
  </div>
</template>
<script>
import Menu1 from "./components/tabItems/Menu1";
import Menu2 from "./components/tabItems/Menu2";
import Menu3 from "./components/tabItems/Menu3";
// import CompLevel1 from "./components/provider-inject/CompLevel1";
export default {
  name: "App",
  components: {
    // CompLevel1,
    Menu1,
    Menu2,
    Menu3,
  },
  data() {
    return {
      // displayMenu: [false, false, false],
      username: "scalper",
      activeTab: "Menu1",
    };
  },
  provide() {
    return {
      name: this.username,
    };
  },
  methods: {
    clickMenu(num) {
      this.displayMenu[num] = this.displayMenu[num] ? false : true;
    },
  },
};
</script>

<style></style>

 

 

Menu1.vue

<template>
  <h2>Menu1</h2>
</template>

<script>
export default {
  name: "MyMenu1",
};
</script>

<style></style>

 

 

Menu2.vue

<template>
  <h2>Menu2</h2>
</template>

<script>
export default {
  name: "MyMenu2",
};
</script>

<style></style>

 

 

Menu3.vue

<template>
  <h2>Menu3</h2>
  <!-- 다른 메뉴로 옮기면 input 새로 렌더링 되서 사라진다<br /> -->
  <input type="text" v-model="username" />
</template>

<script>
export default {
  name: "MyMenu3",
  data() {
    return {
      username: "",
    };
  },
};
</script>

<style></style>