[Vue + typescript] dynamic Component 생성하기

VUE.JS 목록

일반적인 콤포넌트 사용하기

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import MyComponent from '@/components/MyComponent.vue'

@Component({
  components: {
    MyComponent
  }
})
export default class DynamicComponent extends Vue {
  
}
</script>

 

 

다이나믹 콤포넌트 사용하기

<template>
  <div>
    <component :is="isLogined"></component>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import MyComponent from '@/components/MyComponent.vue'

@Component({
  components: {
    MyComponent
  }
})
export default class DynamicComponent extends Vue {
  get isLogined () {
    if (true) {
      return MyComponent
    }
  }
}
</script>

 

 

다이나믹 콤포넌트 상태 보존하기

<template>
  <div>
    <keep-alive>
      <component :is="isLogined"></component>
    </keep-alive>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import MyComponent from '@/components/MyComponent.vue'

@Component({
  components: {
    MyComponent
  }
})
export default class DynamicComponent extends Vue {
  get isLogined () {
    if (true) {
      return MyComponent
    }
  }
}
</script>

 

 

 

 

다이나믹 콤포넌트 & Transition

<template>
  <div>
  
    <button v-on:click="dynamic = !dynamic">
      dynamic
    </button>
    
    <transition name="dynamic">
      <component :is="isDynamic"></component>
    </transition>
    
  </div>
</template>

<script lang="ts">
import { Vue } from 'vue-property-decorator'
import TestDynamicChildView from '@/views/test/TestDynamicChildView.vue'

@Component({
  components: {
    TestDynamicChildView
  }
})
export default class TestDynamicComponentView extends Vue {
  
  dynamic = false

  get isDynamic () {
    if (this.dynamic) {
      return TestDynamicChildView
    }
  }
}
</script>

<style scoped>
/* dynamic */
.dynamic-enter-active, .dynamic-leave-active {
  transition: all .3s ease;
}
.dynamic-enter, .dynamic-leave-to {
  transform: translateX(50px);
}
</style>

 

VUE.JS 목록