[Vue.js 기본 문법] v-for, 컴포넌트 생성, props 등록.전달

[목차]

v-for 사용법을 알아본다

컴포넌트화 하는 법을 알아본다

props를 사용하여 부모 -> 자식 흐름으로 데이터 바인딩하는 방법을 알아본다

props에 v-for를 함께 써서 응용해본다.

 

---

 

v-for 반복문

food: ['chicken', 'pizza', 'ramen', 'dumplings'],

 

food라는 data가 있다고 가정하자, 이를 < li > 로 목록화시켜서 보여주고 싶다면?

= > for문!! 반복문!!

 

Vue.js에서는 for문을 v-for라고 부른다.

v-for 사용법

 

1. 데이터를 만들어준다

 

2. < li > 태그에 v-for를 넣어준다.

<li v-for="별명 in 데이터이름" v-bind:key=""> {{별명}} </li>

3. for문 사용시 v-bind:key=""를 꼭 넣어준다. (안 쓰면 에러 남)

이유:

In 2.2.0+, when using v-for with a component, a key is now required.

출처: https://bumcrush.tistory.com/164 [맑음때때로 봄]

 

전체코드

App.vue

 

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <h4 v-if="flag">Hello world, this is {{name}}.</h4>

    <button v-on:click="hideName"> 이름 숨기기</button>

    <ul>
      <li v-for="이름들 in food" v-bind:key="이름들">{{이름들}}</li>
    </ul>

  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  },
  data() {
    return {
      name: "sarah",
      flag: "true",
      food: ['chicken', 'pizza', 'ramen', 'dumplings'],
    };
  },
  methods:{
    hideName(){
      this.flag=false;
    }
  }
}
</script>

<style>
생략
</style>

 

결과화면

 

---

 

component 만들어서 분리하기

 

목표

list 부분을 따로 component로 만들어 분리해보자.

 

이유

지금은 고작 3줄이지만, 만약 1000줄이 넘어가고 + 이를 활용해야하는 곳이 많아지면 100000줄 되는 건 금방이기 때문.

-> 그래서 component를 만드는 거고 유지 보수를 쉽게할 수 있는 것이다!

 

부모: App.vue

자식: Card.vue

 

먼저 ul li부분을 Card.vue에 분리시켜 컴포넌트화 시키자.

 

<template>
  <div>
    <ul>
      <li><!--여기에 App.vue의 데이터를 가져와야됨.--></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Card',
  data(){
    return{
    };
  },
}
</script>

<style>
</style>

 

component 쓰는 3가지 step

 

1. 분리한 컴포넌트를 부모에서 import 한다.

App.vue

import Card from './components/Card.vue';

 

2. components:{}에 만든 컴포넌트의 이름 등록

App.vue

components: {
    Card: Card,
  },

 

3. 원하는 곳에 가져다 쓰기

App.vue

<template>
  <div id="app">

    <Card/>

  </div>
</template>

 

---

 

부모 데이터를 사용하는 법 - props

 

컴포넌트를 분리해야하는 것도 알겠고,, 어떻게 하는 지도 알았다만.

대부분 중요한 data는 부모가 가지고 있음. 그럼 자식이 데이터를 가져다 쓰려면 어떻게 해야할까?

 

Props를 사용하면 된다 ! 

Props를 사용하는 3가지 step

 

1. 원하는 곳에 자식 컴포넌트를 가져다 쓴다.

근데, 그냥 <자식 컴포넌트 이름/> 이라고 쓰는 게 아니라 v-bind를 같이 써준다.

 

<자식컴포넌트이름 v-bind: 자식 데이터 = "부모 데이터 이름"/>

 

App.vue

<Card  v-bind:자식꺼="부모꺼" />

 

2. 자식에서 props 등록

-물려받은 데이터를 props라고 생각하면 됨

 

Card.vue

  props : {
    자식꺼: Array,
  }

 

3. 부모한테서 가져온 데이터를 자유롭게 사용한다.

Card.vue

<template>
  <div>
    <ul>
      <li>{{자식꺼}}</li>
    </ul>
  </div>
</template>

 

아래에 app.vue card.vue 비교 이미지 있음

---

 

v-for와 props 바인딩

 

아무리 컴포넌트화 한들, 데이터 개수가 xxx 개라면 v-for를 사용할 수밖에 없다!

 

자식 컴포넌트 가져다 쓰는 부분에 for문을 같이 돌리는 방법을 알아보자.

 

1. v-for와 v-bind를 동시 사용한다.

v-for = “아이템 in 데이터”

v-bind : 전해줄 아이템=“아이템”

 

App.vue

<Card v-for="(별명, i) in 부모꺼" v-bind:자식꺼="부모꺼[i]" v-bind:key="i"/>

 

2. 똑같이 props 등록 후 자유롭게 사용

<template>
  <div>
    <ul>
      <li>{{자식꺼}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Card',
  data(){
    return{
    };
  },
  props : {
    자식꺼: Array,
  }
}
</script>

<style>
</style>

 

---