Vue.js props 사용 샘플

props

• 부모컴포넌트에서 자식컴포넌트로 데이터를 전달할 때 사용
• 자식컴포넌트에서 전달받을 데이터를 "props"로 선언
• 부모컴포넌트에서 "v-bind:" 또는 ":" 를 사용하여 데이터 전달

// 부모컴포넌트 데이터 전달
<ChildComponent :message="Message" />

// 자식컴포넌트 props 선언
props: {
	message: String,
}

 

부모 컴포넌트 샘플 코드

<template>
  <div>
    <!-- v-bind 사용하지 않으면 모두 문자열 형식으로 전달됨
    <ChildComponent number="23" />
    -->
    <ChildComponent
      :message="message"
      :number="23"
      :bool="true"
      :array="[1, 2, 3, 4]"
      :user="user"
      valid="C"
    />
  </div>
</template>
<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: "Message",
      user: {
        name: "홍길동",
        age: 30,
      },
    };
  },
};
</script>

 

자식 컴포넌트 샘플 코드

<template>
  <div>
    <p>string: {{ message }}</p>
    <p>number: {{ number }}</p>
    <p>bool: {{ bool }}</p>
    <p>array: {{ array }}</p>
    <p>user: {{ user.name }}, {{ user.age }}</p>
    <p>valid: {{ valid }}</p>
  </div>
</template>
<script>
export default {
  name: "ChildComponent",
  props: {
    message: String,
    number: {
      type: Number,
      default: 0, // default 값 선언
      required: true,
    },
    bool: {
      type: Boolean,
      default: false,
    },
    array: {
      type: Array,
    },
    user: {
      type: Object,
      default: function () {
        return { name: "TEST", age: -1 };
      },
    },
    valid: {
      type: String,
      validator(value) {
        // validator 처리
        console.log(value);
        return true;
      },
    },
  },
};
</script>

 

테스트 결과 화면