-
vue10(동적 컴포넌트 component tag / 컴포넌트 갈아끼우기)JS/vue.js 2022. 3. 15. 17:48
화면 이동 / 변경 하는 경우 1.vue-router 사용 2.dynamic component 사용
<dynamic component>
<component></component>
컴포넌트를 동적으로 변화가 필요한 경우 사용
: 다른 컴포넌트로 전환하면 해당 컴포넌트는 destroy 되고, 새 컴포넌트가 create 된다.
<component v-bind:is="oneComponent"></component> .. <component v-else :is="oneComponent"></component>
다음과 같이 is 를 사용하여 동적으로 컴포넌트 랜더링한다.
(destroy되는걸 막으려면 <keep-alive></keep-alive>를 사용하면 인스턴스를 캐시로 저장 가능 → 이전상태를 기억ㅇㅇ!)
--연습하기--
동적 컴포넌트를 이용하지 않는 경우에는
<template> <div> <button @click="bananaIsVisible=!bananaIsVisible; appleIsVisible=!appleIsVisible;">Here!</button> <Banana v-if="bananaIsVisible"></Banana> <Apple v-if="appleIsVisible"></Apple> </div> </template> <script> import Banana.. import Apple.. export default { components : { Banana, Apple }, data() { return { bananaIsVisible: false, appleIsVisible: true, } } } </script>
이렇게 작성했던걸 동적 컴포넌트를 이용하면 조금 간단해진다.
<template> <div> <button @click="banana = !banana">HERE!</button> <component :is="banana? 'Banana' : 'Apple'"> </component> </div> </template> <script> import Banana .. import Apple .. export default { components: { Banan, Apple }, data() { return { banana=true } } } </script>
'JS > vue.js' 카테고리의 다른 글
vue11(redirect 리다이렉트 ) (0) 2022.03.15 에러6(.env에러/ELIFECYCLE/this is probably not a problem with npm) (0) 2022.03.15 vue9(props,emit) (0) 2022.03.14 vue8(router navigation guard 네비게이션 가드) (0) 2022.03.14 에러4(Component name should always be multi-word) (0) 2022.03.14