Vue - component 만들기, 데이터 props전달

 

길고 복잡한 HTML 덩어리를 한줄로 축약하려면 Component화 시키면 된다.

.vue파일을 새로 만들어서 HTML 작성하고
1. 만든 .vue파일 import하기
2. component에 등록하기
3. 가져다 쓰기

 

component 파일 작명할 때 주의점 🔽

 컴포넌트.vue 작명은 2단어 이상으로 작명하자. 안그러면 에러발생ㅠ

ex) MyDiscount 작명은 카멜형식

 

이게 귀찮으면 vue.config.js 파일 열어서 lintOnSave : false 하고 서버 재가동하거나

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // transpileDependencies: true,
  lintOnSave: false
})

package.json파일 열어서 rules 항목에 한줄 추가하고 서버 재가동

"rules" : {
	"vue/multi-word-component-names" : "off"
}

 

할인배너를 component로 만들어서 삽입해보자.

step1. Discount.vue 파일에 <  로 기본 vue 템플릿 생성, HTML작성 후 App.vue에서 script태그 아래  import 하기

 

 

import Discount from './Discount.vue';

 

 

step2. components : {  } 에 등록

 

export default {

  name: 'App',

  data(){

    return {

      modal : 0,

      color : 'color : blue',

      menu : ['Home', 'Shop', 'About'],

      products : data,

      clickIndex : 0,

    }

  },

  methods : {

  },

  components: {

    Discount,  

  }

}

 

step3. import 할때 작명한 이름으로 template태그 안 원하는 곳에 사용

 

 

<Discount/>

 

 

---

 

App.vue와 새로만든 component 가 state를 공유하면 어떻게 전달해줘야할까?

props로 데이터 전송하면됨.

1. 컴포넌트 태그에 v-bind or :데이터 = "데이터" 로 부모데이터 전송
2. component에 props 받은 값 자료형과 함께 등록
(주의) props는 read-only임. click이벤트로 수정하면 에러남.

공유되는 data state만들 때 경우엔 최상위 컴포넌트에 만들자.

 

step1. App.vue의 Card컴포넌트에 props로 데이터 보내기. 기존 코드를 컴포넌트화 했으니 반복문도 써줬다.

 

 

<Card :a="products[i]" v-for="(a,i) in products" :key="i"  />

 

 

다양한 형식의 자료형도 전송가능하다. 🔽

// 문자는 그냥 작명="데이터", 나머지는 : 붙여주기.
// 오브젝트 자료형은 key.value 값 보내기도 된다.

<Modal str="str" :number = "1234" :obj="obj" :이름="obj.name"   />

export default {
  name: 'App',
  data(){
    return {
      obj : { name: 'kim', age : 20  },
    }
  }
}

 

step2. Card.vue 스크립트 태그안에 props 등록. object형식으로 작성하되 자료형을 기입해준다.

<template>
      <div class="products"> 
        <img :src="a.image" class="room-img">
        <h4 class="title" :style="color">{{ a.title }}
        </h4>
        <p>{{ a.price }}원</p>
        <p>{{ a.content }}</p>
    </div>
</template>

<script>
export default {
    name: 'Card',
    props : {
        a : Object,
    },
    data(){
        return{
            color : 'color : blue',
        }
    }
}

</script>
<style>
	//생략
</style>