Vue.js props 속성: 부모에서 자식으로 데이터 전송

src/App.vue

<template>
  <div>
    <GlobalHeader weather="맑음" /> <!-- 여기!! -->
    <MainContent />
  </div>
</template>

<script>
import GlobalHeader from "./components/GlobalHeader.vue";
import MainContent from "./components/MainContent.vue";

export default {
  name: "App",
  components: {
    GlobalHeader,
    MainContent,
  },
};
</script>

src/components/GlobalHeader.vue

<template>
  <header class="header">
    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <button class="location" type="button">
            <h1 class="location-name">수원시 금곡동</h1>
            <strong class="location-weather">{{ weather }}</strong> <!-- 여기!! -->
          </button>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: "GlobalHeader",
  props: { <!-- 여기!! -->
    weather: String,
  },
};

App.vue에서 데이터를 받아서 GlobalHeader.vue에 넣고자 props를 사용하였다.

1. App.vue에서 weather="맑음"을 <GlobalHeader />에 지정해준다.

2. GlobalHeader.vue 내 script에 props속성을 추가한다.

3. 변수명: 타입을 Object 형태로 정리한다.
   
   

🚥 이 때 주의할 사항이 있다.

받아올 데이터가 String일 경우에는 부모에 변수명="데이터"라고 작성하고
그 외에는 :변수명="데이터" 혹은 v-bind:변수명="데이터"라고 작성해야한다.