[Nuxt] 형제 컴포넌트끼리 데이터 공유하기

📍목표

- Nuxt3(Vue.js) 에서 형제 컴포넌트끼리 데이터 공유하기

 

📍React vs Vue 데이터 공유 비교

- React는 단방향 데이터 플로우이므로 아래 사진처럼 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐른다

- 반면, Vue 에서는 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 수 있다. event emit을 활용하면 된다

 

 

📍자식1 컴포넌트에서 상태 변경

- defineEmits() 를 활용해서 emit 함수 정의하기

- 상태를 변경할 자식 컴포넌트에서 먼저 defineEmits()로 emit 함수를 선언한다

- 그리고 컴포넌트가 마운트 되면 mountain 기본값을 emit 해준다

- 상태가 변경될 때마다 emit을 실행하기 위해 watch를 사용한다

 

MountainHeader.vue

<template>
  <div class="w-full bg-fuchsia-200 flex items-center justify-between py-4">
    <div>
      <h2>자식1 컴포넌트</h2>
      <h2>현재 산: {{ selectedMountain }}</h2>
    </div>
    <UInputMenu v-model="selectedMountain" :options="mountainList" />
  </div>
</template>

<script setup lang="ts">
const mountainList = ["북한산", "관악산", "아차산"];
const selectedMountain = ref(mountainList[0]);
const emit = defineEmits(["changeMountain"]);

onMounted(() => {
  emit("changeMountain", selectedMountain.value);
});

watch(selectedMountain, () => {
  emit("changeMountain", selectedMountain.value);
});
</script>

 

📍부모 컴포넌트에서 event 받고, 자식2 컴포넌트에 props 내려주기

- 자식 컴포넌트에서 선언한 이벤트에 알맞은 핸들러를 v-on 디렉티브에 부착한다

- 이벤트를 받으면 로컬 ref 상태에 저장한다

- 그리고 ref 상태를 자식2 컴포넌트에 props로 내려준다

 

mountain.vue

<template>
  <div class="p-6 flex flex-col gap-4 w-full bg-amber-200">
    <h2>부모 컴포넌트</h2>
    <MountainHeader @change-mountain="(args) => (mountainName = args)" />
    <MountainList :mountain="mountainName" />
  </div>
</template>

<script setup lang="ts">
const mountainName = ref("");
</script>

 

📍자식2 컴포넌트에서 props 받기

- 부모 컴포넌트에서 props를 받아 화면에 표시한다

- defineProps를 활용하여 props를 선언한다

- props를 반응형으로 만들기 위해 toRefs()로 래핑해야 <script setup> 내부에서 반응형으로 동작함

 

MountainList.vue

<template>
  <div class="w-full bg-fuchsia-200">
    <h2>자식2컴포넌트</h2>
    <h2>현재 산: {{ mountain }}</h2>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  mountain: string;
}>();
const { mountain } = toRefs(props);

// 자식2 컴포넌트에서 상태 변경을 확인
watch(mountain, () => {
  console.log("mountain: ", mountain.value);
});
</script>