82일차

• vue 시작하기~ computed와 watch
• 그룹과제 정리하기
• 클론코딩 by vue

새로배운 내용

1. vue의 Dynamic component

<template>
  <div>
    <button @click="setSelectedComponent('active-goals')">
      ActiveGoals
    </button>
    <button @click="setSelectedComponent('manage-goals')">
      ManageGoals
    </button>
    <!-- <ActiveGoals v-if="setSelectedComponent === 'active-goals'" />
    <ManageGoals v-if="setSelectedComponent === 'manage-goals'" /> -->
    <component :is="selectedComponent" />
  </div>
</template>

<script>
import TheHeader from '~/components/TheHeader.vue'
import ActiveGoals from '~/components/ActiveGoals.vue'
import ManageGoals from '~/components/ManageGoals.vue'
export default {
  components: {
    ActiveGoals,
    ManageGoals
  },
  data() {
    return {
      selectedComponent: 'active-goals',
    }
  },
//  methods: {
//    setSelectedComponent(cmp) {
//      this.selectedComponent = cmp
//    }
//  }
}
</script>

keep-alive

만약 이렇게 수정중에 다른 컴포넌트로 이동을 했다가 돌아오면 input창이 비워지게 되는 것을 확인할 수 있습니다. 이렇게 컴포넌트를 전환하면 입력필드가 DOM에서 제거되게 됩니다.

keep-alive를 이용하면 컴포넌트의 상태가 저장되게 됩니다.

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

Teleport

<Teleport>는 구성 요소 템플릿의 일부를 해당 구성 요소의 DOM 계층 외부에 있는 DOM 노드로 "텔레포트"할 수 있게 해주는 내장 구성 요소입니다.