부모 컴포넌트에서 자식 컴포넌트로 데이터 전달

자식 컴포넌트로 데이터 전달

// DataBindingExample.vue
<template>
  <div>
    <page-title :title="title" />
    <ChildComponent
      :likes="23"
      :isOk="true"
      :commentIds="commentIds"
      :author="author"
    />
  </div>
</template>

<script>
import PageTitle from "../components/PageTitle.vue";
import ChildComponent from "./ChildComponent.vue";

export default {
  components: { "page-title": PageTitle, ChildComponent },
  data() {
    return {
      title: "부모 컴포넌트에서 전송할 타이틀",
      commentIds: [1, 5, 2, 3],
      author: {
        name: "홍길동",
        company: "회사",
      },
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {},
};
</script>

<style scoped></style>

// ChildComponent.vue
<template>
  <div>
    <div>likes: {{ likes }}</div>
    <div>isOk: {{ isOk }}</div>
    <div>commentIds : {{ commentIds }}</div>
    <div>author name : {{ author.name }}</div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      sampleData: "",
    };
  },
  props: {
    likes: {
      type: Number,
      default: 0,
    },
    isOk: {
      type: Boolean,
      default: false,
    },
    commentIds: {
      type: Array,
    },
    author: {
      type: Object,
    },
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {},
};
</script>

<style scoped></style>

문자 데이터 전달

숫자 데이터 전달

Boolean 데이터 전달

배열 데이터 전달

오브젝트 데이터 전달