동적으로 vue 컴포넌트 선언하기

vue에서 화면을 이동할때 컴포넌트를 변경하는데 렌더링이 아닌 값에 따라 동적으로 컴포넌트를 선언해서 변경하는 방법을 알아보았다!

 

1. 컴포넌트 갈아끼우는 방법

모든 컴포넌트들을 선언 한 뒤, 값에 따라 가져오는것이다.

 

<template>
	<div class="container">
    <!-- 여기서 갈아끼운다! -->
    	<component :is="Auth ? 'Mypage' : 'Login'"></component>
    </div>
</template>

<script>
	import Login from './Login'
    import Mypage from './Mypage'
    
    export default{
   		props: ['auth'],
        data(){
        	return{
            	Auth: this.auth
            }
        },
    	components:{Login, Mypage}
    }
</script>

만약 부모 컴포넌트로 받은 auth가 있을경우 마이페이지 컴포넌트로 이동하고 아닐경우 로그인 화면으로 이동한다.

auth 값에 따라 component 엘리먼트의 is 속성에 바인딩 된 값이 변경된다.

 

2. 필요한 컴포넌트만 로딩하여 사용하기

로딩해야하는 컴포넌트가 한두개가 아닌 여러개일 경우에 위의 방식보다 더 효율적인데 필요한 컴포넌트만 import 하여 사용하는 방식이다.

 

<template>
	<div class="container">
    <!-- 여기서 갈아끼운다! -->
    	<component :is="witchStep"></component>
    </div>
</template>

<script>
	import Login from './Login'
    import Mypage from './Mypage'
    
    export default{
   		props: ['auth'],
        data(){
        	return{
				active: 0
            }
        },
    	components:{
        	'Login': () => import('./Login'),
            'Mypage': () => import('./Mypage)
        },
        computed:{
        	witchStep(){
            	switch(this.actvie){
                	case 0: 
                    	return 'Login';
                    case 1:
                    	return 'Mypage';
                }
            }
        }
    }
</script>

 

위와 같이 하면 동적으로 필요한 컴포턴트 마다 import 할 수있다.

 

 

출처 및 참고자료

lovemewithoutall.github.io/it/vue-dynamic-component-with-vuex/

Vue.js에서 Vuex와 함께 동적 컴포넌트(다이나믹 컴포넌트) 사용하기