Vue Component

탬플릿 예시

위와 같은 탬플릿이 있다. 노트북 카드를 구성하는 html은 다음과 같을 것이다.

<div>
	<img src="..."/>
    <div class="avatar"></div>
    <h2>노트북</h2>
    <p class="detail">상세설명</p>
</div>

위와 같은 카드를 여러 개 만들기 위해서는 위 코드를 복사 한 후, 각 태그의 내용들을 각각의 제품에 맞는 정보로 수정할 것이다.

 

Vue Component 메소드는 위의 과정을 간단하게 가능하게 해준다. vue로 Component를 정의해주고 Component로 정의된 <태그>를 나열 및 작성하면 된다.

Vue.component('태그명', {
   설정값 (json 형식)
})

 

 

1) component 설정하기

<script>
	Vue.component('product',{
    	props:['image', 'title', 'description', 'avatar'],
        template:
        `
        	<div class="template">
            	<img class="productImg" :src="image"/>
                <div>
                	<div>
                    	<img :src="avatar"/>
                    	avatar
                    </div>
                    <div> {{ title }} </div>
                    <p> {{ description }} </p>
                </div>
            </div>
        `
    })
</script>

 

props : 외부에서 attribute(속성) 값으로 입력받을 항목들을 props 안에 배열로 넣어준다.

template : 상품을 표현할 html 태그들을 ` ` 안에 넣어준다.

 

 

2) component 태그 작성하기

<div>
	<product
    	image="../../..."
        avatar="../../..."
        title="노트북"
        description="노트북 상세 설명"
    ></product>
    
    <product
    	image="../../..."
        avatar="../../..."
        title="아이폰"
        description="아이폰 상세 설명"
    ></product>
    
    ...
</div>