Dynamic Component

컴포넌트를 상황에 따라서 동적으로 보이게 하고 싶을때가 있다.

이런 때, Dynamic Component를 사용한다.

 

<template>
  <select v-model="componentName">
    <option value="Home">Home</option>
    <option value="About">About</option>
  </select>

  <component :is="componentName"></component>
</template>

<script>
import About from "@/components/About"
import Home from "@/components/Home"

export default {
  name: "App",
  components: {
    Home,
    About
  },
  data() {
    return {
      componentName: "Home"
    }
  }
}
</script>

component라는 것을 선언한다. 여기에 component를 선언한다는 것을 의미하고, :is에 컴포넌트의 이름이 나타나게 하면된다.

컴포넌트가 Unmount되면 기존에 가지고 있는 data도 날라간다.

 

이를 방지할려면,

  <keep-alive>
    <component :is="componentName"></component>
  </keep-alive>

이럴 경우, 컴포넌트가 unmount되지 않는다. 하지만, component가 사라지면서 어떠한 행위를 하고 싶으면 어떡할까?

그럴 경우,

<template>
  <h1>Home Page</h1>
</template>

<script>
export default {
  unmounted() {
    console.log("Home unmounted")
  },
  activated() {
    console.log("Home component activated");
  },
  deactivated() {
    console.log("Home component deactivated");
  }
}
</script>

Vue에서는 activated와 deactivated라는 함수를 지원한다.