Components_provide, inject, Dynamic component(2)

Provide-Inject

 

부모컴포넌트에 provide

  provide: {    username: 'scalper'  }

해당 값을 전달받을 먼 자식 컴포넌트에게 inject (배열로)

export default { 
  name: 'comp-3', 
  inject: ["username"],
}

 

 

 

생산성 없는 동적라우팅의 모습 ▼

<template>
  <div>
    <button @click="activeTab = 'menu1'">menu1</button>
    <button @click="activeTab = 'menu2'">menu2</button>
    <button @click="activeTab = 'menu3'">menu3</button>
    <Menu1 v-if="activeTab ==='menu1'" />
    <Menu2 v-if="activeTab ==='menu2'" />
    <Menu3 v-if="activeTab ==='menu3'" />
  </div>
</template>

<script>
import Menu1 from "./components/tabItems/Menu1.vue";
import Menu2 from "./components/tabItems/Menu2.vue";
import Menu3 from "./components/tabItems/Menu3.vue";
export default {
  name: "App",
  components: { DetailView , ProvideInjectComp, Menu1, Menu2, Menu3},
  data() {
    return {
      activeTab:"menu1"
    };
};
</script>

 

 

 

Dynamic component

 

component라는 태그를 사용해서 다이나믹 컴포넌트를 만들 수 있다.

is라는 prop을 넘기게 되고 is에 컴포넌트 이름이 넘겨지게 된다. 

 

keep-alive 화면이 전환될 때마다 렌더링되지만, 각 컴포넌트의 내용을 유지시켜준다. 

<template
  <div>
    <button @click="activeTab = 'menu1'">menu1</button>
    <button @click="activeTab = 'menu2'">menu2</button>
    <button @click="activeTab = 'menu3'">menu3</button>
    <keep-alive>
    <component :is="activeTab"></component>
    </keep-alive>
  </div>
</template>