뷰(Vue) 컴포넌트

 

1

 

뷰 컴포넌트란?

 

화면을 구성할 수 있는 블록(특정 영역)단위를 의미하며, 컴포넌트를 활용하여 화면을 빠르게 구조화하여 일괄적 패턴으로 개발할 수 있다. 화면의 영역을 컴포넌트로 쪼개어 관리하면 나중에 유지보수가 용이하며, 남이 작성한 코드를 보다 직관적으로 이해할 수 있다.

 

흔히 웹의 구성화면에서 네비게이션 바, 테이블, 리스트 등과 같은 요소들을 잘게 쪼개어 컴포넌트로 관리한다.

 

이런 느낌

 

전역 컴포넌트(여러 인스턴스에서 공통으로 사용)

 


    <div id="app">  //인스턴스
        <global-component></global-component> 
    </div>
  
    <template id="template">		//템플릿
        <span>전역 컴포넌트 입니다.</span>
   </template>
   
<script>
    Vue.component('global-component',{ //전역 컴포넌트
        template : '#template'  
    })
    var App = new Vue({
        el : '#app'
    })
</script>

 

우선 컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그를 의미하며, 컴포넌트 내용에는 template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있다.

 

 

지역 컴포넌트(특정 인스턴스에서만 사용가능)

 

    <div id="app">
        <local-component></local-component>
    </div>

<script>
    var local_temp = {	// 지역 컴포넌틑 템플릿
        template : '<p>지역 컴포넌트 입니다</p>'
    }

    var App = new Vue({
        el : '#app',
        components : {    /지역 컴포넌트
            'local-component'  : local_temp
        }
    })  
</script>

지역 컴포넌트이기 떄문에 #app 인스턴스 범위에서만 접근이 가능

 

 

props를 이용한 정보전달

 

 	//props를 이용한 정보전달    
    
 <div id="app">
		<component-name message="props사용!"></component-name>
        <component-name message="여러개를 쓸 수 있기때문에 배열로!"></component-name>
 </div>
  
 <template id="template"> //템플릿
        <p>{{message}}</p>
 </template>

<script>
    Vue.component('component-name',{
        template : '#template' ,
        props : [ 'message' ]  //배열로 나열
    })
    var App = new Vue({
        el : '#app'
    })  
</script>

 

 

컴포넌트들이 부조-자식 관계로형성되었을 때 각 컴포넌트 내부의 데이터는 캡슐화되기 때문에 다른 컴포넌트나 앱에서 접근할 수 없다. 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달하기 위해 props을 이용해야한다. 부모에서 자식으로 단방향으로만 전달 가능

 

 

See the Pen [Vue.js] Array Data output example by junheeleeme (@junheeleeme) on CodePen.

 

 

 

 

 

 

저작자표시