코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 7일차

5장 컴포넌트 다루기

5.5 컴포넌트의 데이터 효율적으로 다루기

컴포넌트의 데이터 공유하기(provide, inject)

// App.vue

<script>
import FirstChild from './components/FirstChild.vue';
export default {
  components: {
    FirstChild,
  },
  provide() {
    return {
      message: this.message,
    };
  },
  data() {
    return {
      message: 'Hello, Vue.Js',
    };
  },
}
</script>

<template>
  <FirstChild />
</template>

// FirstChild.vue

<script>
export default {
    inject: ['message'],
}
</script>

<template>
    <h1>컴포넌트</h1>
    <p>내가 만든 첫 번째 컴포넌트</p>
    <h1> {{  message }}</h1>
</template>

<style>
h1 {
    color: blue;
}
p {
    color: green;
}
</style>

컴포넌트의 데이터 참조하기($refs, $parent)

5.6 컴포넌트 슬롯 사용하기

이름이 없는 슬롯

// CustomButton.vue
<template>
  <button class="btn">
    <slot></slot>
  </button>
</template>

//App.vue
<template>
  <CustomButton>더블클릭</CustomButton>
</template>

이름이 있는 슬롯

// 형식
<template>
  <slot name="값"></slot>
  <slot name="header"></slot>
  <slot name="main"></slot>
</template>

슬롯에 기본값 적용하기

<template>
  <button class="btn">
    <slot>제출</slot>
  </button>
</template>