동적 컴포넌트 ( is, keep-alive )

동적 컴포넌트

https://ryuzuka.github.io/VUE/tutorial/12_dynamicComponent.html

• is

- 같은 마운트 포인트를 사용하고 예약된 <component> 엘리먼트를 사용하여 여러 컴포넌트 간에 동적으로 트랜지션하고 is 속성에 바인드 할 수 있다.

• keep-alive

- 컴포넌트를 메모리에 유지하여 상태를 보존하거나 다시 렌더링하지 않도록하려면 동적 컴포넌트를 <keep-alive> 로 래핑한다.

<div id="app">

<ul>

<li @click="current = 'component1'"><a href="#">component1</a></li>

<li @click="current = 'component2'"><a href="#">component2</a></li>

<li @click="current = 'component3'"><a href="#">component3</a></li>

</ul>

<keep-alive>

<component :is="current"></component>

</keep-alive>

</div>

<script>

new Vue({

el: '#app',

data: {

current: 'component1'

},

components: {

component1: {

template: '<div>component1</div>'

},

component2: {

template: '<input type="text" placeholder="conponent2">'

},

component3: {

template: '<div>component3</div>'

},

}

});

</script>