Vue3 #9

본론

v-model과 emits

두 방법을 활용해서 자식에 있는 input을 활용해서 부모에 있는 value를 변경할 수 있습니다.

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

const TextData = ref("panda");
</script>

<template>
  <HelloWorld
    :TextData="TextData"
    @inputEmit="(payload) => (TextData = payload)"
  /> 
  <HelloWorld v-model:TextData="TextData" />
</template>

/* HelloWorld.vue */
<script setup>
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  TextData: {
    type: String,
    required: true,
    default: "",
  },
});

const emits = defineEmits(["update:TextData"]);
</script>

<template>
  <p>{{ props.TextData }}</p>
  <input
    type="text"
    :value="props.TextData"
    @input="$emit('inputEmit', $event.target.value)"
  />
  <input
    type="text"
    :value="props.TextData"
    @input="$emit('update:TextData', $event.target.value)"
  />
</template>

각각 2가지 방법을 활용했을 때 v-model이 활용하기는 조금 더 쉬워보였으나 유효성검사가 아직 되지않고 emits보다 필요한 인자의 정보를 보내줄 때 정확한 정보가 아니라서 코드의 가독성은 좋더라도 emits의 방법이 더 좋은 코드를 보여줍니다.

 

slot

사실 emit부터 슬슬 어려워지기 시작합니다 ㅎㅎ.... 기존의 코딩과 아예 다른 개념을 배우다 보니 어려운 느낌? 인 것 같습니다.

그래도 코딩을 하면서 자식 컴포넌츠가 부모 컴포넌츠에게 값을 전달하는 개념은 정말 좋다고 생각합니다.

그림으로 보고 이해하는게 빠르다고 생각해서 공식홈페이지의 그림을 가져왔습니다.

아래는 간단하게 사용하는 코드입니다.

<BaseLayout>
  <template #header>
    <h1>다음은 페이지 제목일 수 있습니다.</h1>
  </template>

  <template #default>
    <p>주요 내용에 대한 단락입니다.</p>
    <p>그리고 또 하나.</p>
  </template>

  <template #footer>
    <p>다음은 연락처 정보입니다.</p>
  </template>
</BaseLayout>

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

이런식으로 다중의 slot 태그에 name속성을 넣어주면 이름에 맞게 slot이 삽입됩니다.

 

정리

사실 slot의 활용범위는 어마무시합니다...
하지만 활용목적을 보면 아직 이해가 와닿지 않아서 조금 공부가 더 필요해 보입니다....

간략한 설명으로

• 부모 컴포넌츠에서 자식 컴포넌츠의 값을 보여줍니다.
• 자식 컴포넌츠에서 해당 값을 보내주거나 수정이 가능합니다.
• 그로인해 최종적인 렌더링 DOM은 slot태그를 감싸는 바로 위의 태그 부분이 됩니다.