props
부모 컴포넌트에서 자식 컴포넌트로 특정한 데이터를 전달하는 용도
부모-자식 간의 데이터 통신 방법이라고도 한다.

slot 은 contents 가 전부 들어간다.

// App.vue
<template>
  <MyBtn
    :color="background_color">
    Melon
  </MyBtn>
  <MyBtn
    large
    color="black">
    Cherry
  </MyBtn>
  <MyBtn>
    Banana
  </MyBtn>
</template>

<script>
import MyBtn from "~/components/MyBtn"
export default {
  components: {
    MyBtn
  },
  data() {
    return {
      background_color: "royalblue"
    }
  }
}
</script>

// MyBtn.vue
// html 요소를 camelCase 로 작성한다. backgroundColor
// large 는 large class 에 large props 를 연결한 것이다.
<template>
  <div    
    :class="{ large }"
    :style="{ backgroundColor: color}"
    class="btn">
    <slot>
    </slot>
  </div>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'gray'
    },
    large: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  display: inline-block;
  margin: 4px;
  padding: 6px 12px;
  background-color: gray;
  border-radius: 4px;
  cursor: pointer;
  color: white;
  &.large {
    font-size: 20px;
    padding: 10px 20px;
  }
}
</style>