[Vue] 컴포넌트 간 데이터 주고받기 (Props, Emit)

Props

부모가 자식한테 넘겨주는 데이터

Emit

자식이 부모한테 넘겨주는 데이터

 

---

Props

defineProps 를 사용해서 자식 컴포넌트와 데이터를 주고 받는다.

 

App.vue

<script setup>
import Parents from "./components/Parents.vue";
</script>

<template>
  <Parents></Parents>
</template>

<style scoped></style>

 

 

Parents.vue

<script setup>
import { ref } from "vue";
import Child from "./Child.vue";
const toChild = ref("");
</script>

<template>
  <h1>부모 컴포넌트</h1>
  <p>부모가 작성한 메시지: {{ toChild }}</p>
  <input type="text" v-model="toChild" />
  <Child :message="toChild"></Child>
</template>

<style scope></style>

 

 

Child.vue

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  message: {
    type: String,
    required: true,
  },
});
</script>

<template>
  <h3>자식 컴포넌트</h3>
  <p>부모로부터 받은 메시지: {{ message }}</p>
</template>

<style scope></style>

 

 

 

 

반복문을 통해 데이터 전달

Parents.vue

<script setup>
import { reactive } from "vue";
import Child from "./Child.vue";
const productList = reactive([
  {
    name: "상품01",
    price: 14000,
  },
  {
    name: "상품02",
    price: 5000,
  },
  {
    name: "상품03",
    price: 21000,
  },
]);
</script>

<template>
  <h1>부모 컴포넌트</h1>
  <ul>
    <Child v-for="product in productList" :product="product"></Child>
  </ul>
</template>

<style scope></style>

 

 

Child.vue

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  product: {
    type: Object,
    required: true,
  },
});
</script>

<template>
  <h3>자식 컴포넌트</h3>
  <p>{{ product.name }}</p>
  <p>{{ product.price }}</p>
</template>

<style scope></style>

 

 

---

Emit

defineEmits 를 통해 데이터를 주고 받는다.

 

Parents.vue

<script setup>
import { ref } from "vue";
import Child from "./Child.vue";

const fromChild = ref("");
const getMessage = (msg) => {
  fromChild.value = msg;
};
</script>

<template>
  <h1>부모 컴포넌트</h1>
  <p>자식에게 전달받은 메시지: {{ fromChild }}</p>
  <Child @send-message="getMessage"></Child>
</template>

<style scope></style>

 

 

Child.vue

<script setup>
import { defineProps, ref } from "vue";

const emit = defineEmits(["send-message"]);

const childMessage = ref("");

const sendMessage = () => {
  emit("send-message", childMessage.value);
  childMessage.value = "";
};
</script>

<template>
  <h3>자식 컴포넌트</h3>
  <input
    type="text"
    v-model="childMessage"
    placeholder="부모에게 전달할 메시지"
  />
  <button @click="sendMessage">전송</button>
</template>

<style scope></style>

input에 보낼 메시지를 입력

전송 버튼을 누르면 부모 컴포넌트에 데이터가 전달됨