[Vue] 컴포넌트 만들기 (props 전달 방법, slot 사용하기)

⚠️ 이 포스팅은 Vue3(한국어): 컴포넌트 기초를 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

---

 

컴포넌트란?

컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 의미한다. 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식을 정의하고 목적에 맞는 기능들을 모아놓는다. 컴포넌트는 단순한 템플릿 이상이며 데이터가 생겼을때 이에 맞춰 UI를 만들어준다

 

컴포넌트의 장점

1. 캡슐화 (모듈화)
2. 재사용성 증가

 

컴포넌트 만들어 불러오기

컴포넌트 만들어주기

<--! MyBtn.vue -->
<template>
  <div class="btn"></div>
</template>

<style scoped>
.btn {
  display: inline-block;
  margin: 4px;
  padding: 6px 12px;
  border-radius: 4px;
  background-color: gray;
  color: white;
  cursor: pointer;
}
</style>

컴포넌트를 불러오기

App.vue에서 MyBtn 컴포넌트를 불러왔기 때문에 두 컴포넌트의 관계는 App.vue(부모) MyBtn(자식) 관계가 된다.

• 부모 컴포넌트(상위 컴포넌트): 자식 컴포넌트를 불러오는 컴포넌트
• 자식 컴포넌트(하위 컴포넌트): 부모 컴포넌트에게서 불려온 컴포넌트

<--! App.vue -->
<template>
  <MyBtn/>
</template>

<script>
import MyBtn from './components/MyBtn.vue';

export default {
  name: 'App',
  components: {
    MyBtn,
  }
};
</script>

 

컴포넌트에 props 전달해서 내부에서 사용하기

props란?

props란 자식 컴포넌트의 속성을 설정할 때 부모 컴포넌트에서 전달해주는 데이터를 의미한다.

 

부모 컴포넌트

props로 color="royalblue"를 전달했다. 부모 컴포넌트에서 전달하는 props인 color는 자식 컴포넌트에서 내부적으로 사용된다.

<--! App.vue -->
<template>
  <MyBtn color="royalblue"/>
</template>

<script>
import MyBtn from './components/MyBtn.vue';

export default {
  name: 'App',
  components: {
    MyBtn,
  }
};
</script>

 

자식 컴포넌트

전달된 color는 backgroundColor의 속성값으로 사용된다. 이때 전달받은 props는 props 메서드에 등록해주어야 한다. props 메서드 안에 전달받을 props의 type을 지정해주고 default로 props가 전달받지 않을 경우 기본값으로 부여할 값을 지정해준다.

<--! MyBtn.vue -->
<template>
  <div :style="{ backgroundColor: color }" class="btn"></div>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'gray',
    },
  },
};
</script>

<style scoped>
.btn {
  display: inline-block;
  margin: 4px;
  padding: 6px 12px;
  border-radius: 4px;
  background-color: gray;
  color: white;
  cursor: pointer;
}
</style>

부모 컴포넌트에서 전달하는 props가 data 메서드에 선언되어 있을 수도 있다

<--! App.vue -->
<template>
  <MyBtn :color="color"/>
</template>

<script>
import MyBtn from './components/MyBtn.vue';

export default {
  name: 'App',
  components: {
    MyBtn,
  },
  data() {
    return {
      // color 선언
      color: '#000',
    };
  },
};
</script>

 

slot 사용법

slot이란?

컴포넌트에 컨텐츠나 다른 컴포넌트를 주입시키는 방법

부모컴포넌트에서 할일

컴포넌트를 여는 태그와 닫는 태그로 구성해주고 그 안에 전달하고 싶은 텍스트를 입력해준다. 아래 예제에서는 MyBtn이라는 컴포넌트에 Button이라는 텍스트를 전달해주었다.

<--! App.vue -->
<template>
  <MyBtn :color="color">Button</MyBtn>
</template>

<script>
import MyBtn from './components/MyBtn.vue';

export default {
  name: 'App',
  components: {
    MyBtn,
  },
  data() {
    return {
      color: '#000',
    };
  },
};
</script>

자식컴포넌트에서 할일

부모 컴포넌트에서 전달하는 텍스트를 받기 위해 자식 컴포넌트에 slot 태그를 추가한다. slot 태그가 있는 부분에는 전달받은 텍스트가 입력된다.

<--! MyBtn.vue -->
<template>
  <div class="btn" :style="{ backgroundColor: color }">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'gray',
    },
  },
};
</script>

<style scoped>
.btn {
  display: inline-block;
  margin: 4px;
  padding: 6px 12px;
  border-radius: 4px;
  background-color: gray;
  color: white;
  cursor: pointer;
}
</style>

 

---

 

함께 읽으면 좋은 포스팅

• [Vue.JS] Component 개념을 익히고 만들어보자!!
• Vue.js의 핵심인 컴포넌트에 대한 간략한 정리
• Vue 슬롯(slot) 사용법 및 예제 (Understanding Slot in Vue.js)