Vue Component 사용하기(props 전달)

1. MenuList.vue 파일을 하나 생성을 합니다.

- vue 자동생성을 이용을 합니다.(안되는 경우 Vetur 설치)

    <div class="menu">
        <p>{{ menu }}</p>
        <p> {{ price }} 원</p>
    </div>

 

2. name를 설정을 합니다.

export default {
    name: 'MenuList',
}

 

3. app 파일에서 v-for문을 활용해서 들어갈 데이터를 만들어 봅시다.

  <menu-list v-for="(menu, index) in menu_list" :key="index" :menu="menu_list[index]" :price="price[index]" />
  
  /*아래와 같은 것을 반복문을 사용한것 */
 <menu-list menu="menu_list[0]" :price="price[0]" />

 

4. MenuList 파일에서 props 설정을 해봅시다.

- 자료형 종류 Array, Object, String, Number

- props로 등록한것은 데이터 바인딩으로 자유롭게 사용 가

<script>
export default {
    name: 'MenuList',
    props: {
        menu: String,
        price: String,
    }
}
</script>

 

5. 결과