컴포넌트-기초

component 재사용

컴포넌트를 재사용하기 위해 Mybtn이라는 컴포넌트를 만들고 props을 통해 다른 컴포넌트에 color를 바꿔줌

• 구조
  
• App.vue

<template>
  <MyBtn />
  <MyBtn color="royalblue" />
  <MyBtn />
  <MyBtn />
</template>

<script>
import MyBtn from '~/components/MyBtn'

export default {
  components: {
    MyBtn
  }
}
</script>

• MyBtn.vue

  Type을 String으로 받았기 때문에, App.vue에서 <MyBtn color="#000" /> 부분을 문자로 받아야한다.

<template>
  <div 
    :style="{ backgroundColor: color}"
    class="btn">
    Apple
  </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>

Button, slot

우리가 평소에 사용하던 Button 처럼 안에 내용을 넣을 수 있고

• App.vue

  <MyBtn>banana</MyBtn>
  <MyBtn :color="color" />
  <MyBtn
    large
    color="royalblue" />
  <MyBtn />
</template>
...

• MyBtn.vue

  그 내용을 <slot></slot>으로 내가 출력하고 싶은 위치에 정해줄 수 있다. 그 자리에 content가 대체된다!
  즉, 굳이 text라는 props를 제공할 필요가 없다.

<template>
  <div 
    :class="{ large }"
    :style="{ backgroundColor: color}"
    class="btn">
    <slot></slot>
  </div>
</template>
...

! 그렇다면, slot 태그는 글자만 들어갈 수 있을까?
정답은 No.

  <MyBtn :color="color">
    <span style="color: red;">Banana</span>
  </MyBtn>

이렇게 <MyBtn></MyBtn> 사이에 들어간 모든 내용이 <slot></slot의 내용이다. 위 예시에서는 <span style="color: red;">Banana</span> 이 부분이 slot 이라고 할 수 있다.

또한 slot을 사용하면 우리가 아는 HTML구조의 button과 유사하게 사용이 가능하다.