컴포넌트문법 (props)

전에 만든 모달창처럼 코드가 길어지면 보기 싫으니 컴포넌트를 이용해서 만들어보자.

그리고 이제, 컴포넌트이름을 2단어 이상으로 만들어야 한다.

<div class="discount">
    <h4>지금 결제하면 20% 할인</h4>
</div>

이런 div박스를 src폴더안에 Discount.vue파일을 만들어서 한글자로 쓸 수 있게 하자.

먼저,

<template>
  <div class="discount">
    <h4>지금 결제하면 20% 할인</h4>
  </div>
</template>

<script>
export default {
	name: 'Discount',
}
</script>

<style>

</style>

이런 뷰파일 기본형식을 만들어서 그 안에, div박스를 넣어준다. 그리고, script태그 안에 name을 넣어주는게 일반적이다. 그래서 name : 'Discount'를 넣어줬다.

이제, App.vue파일에서 가져다 써보자.

쓰는 순서는, import해오고, 등록하고, 사용하면 된다.

그래서 script태그 안에

<script>

import Discount from './Discount.vue'

export default {
  name: 'App',
  data() {//데이터 보관함
    return {
      
    }
  },
  methods : {

  },
  components: {
    Discount : Discount,
  }
}
</script>

import를 해주고,  components 안에 key : value형태로 가져온 value는 우리가 import해온 Discount이며, key는 작명이다.

 

마지막으로

<Discount/>

이렇게 사용해주면 된다.

만약, multi-word에러가 나면 vue.config.js파일에

lintOnSave : false

를 넣어주면 사라진다.

 

이제, 아래처럼 데이터바인딩을 한 컴포넌트를 만들어보자.

<div v-for="(a,i) in 원룸들" :key="i">
    <img :src="원룸들[i].image" alt="" class="room-img">
    <h4 @click="모달창열렸니 = true; 누른거=i">{{원룸들[i].title}}</h4>
    <p>{{원룸들[i].content}}</p>
    <p>{{원룸들[i].price}}만원</p>
</div>

이렇게, 데이터바인딩을 한 컴포넌트를 그냥 옮기면 제대로 동작하지 않는데, 이유는 해당 컴포넌트 밑에 데이터가 없기 때문이다. 그래서 props를 사용해야 한다.

props문법은

<Card :원룸들="원룸들" :누른거="누른거" :모달창열렸니="모달창열렸니" />

이런 식으로, html을 사용할 때, v-bind문법을 이용해 보내주고, 

Card라는 컴포넌트의 script태그에

<script>
export default {
    name : 'Card',
    props : {
        원룸들 : Array,
        누른거 : Number,
        모달창열렸니 : Boolean,
    },
}
</script>

이런 식으로, props : { 받은props이름 : 데이터형식 }으로 작성해주면 마음대로 Card컴포넌트에서 데이터들을 사용할 수 있다.

props를 보낼 땐

<Discount :데이터이름="[1,2,3]" />
<Discount :데이터이름="{ age:20 }" />
<Discount :데이터이름="100" />
<Discount 데이터이름="안녕하쇼" />

이렇게 숫자, 오브젝트, 어레이는 : (v-bind)를 붙여야하고, 문자는 그냥도 가능하다. 그리고

<Discount v-bind="오브젝트명" />

이런 식으로, 오브젝트 : {name : 'kim', age : 20} 여러 개의 key : value가 있는 오브젝트도 한번에 보낼 수 있다.