PropsとEmit コンポーネント間のデータ受け渡し方

今回はコンポーネント間でのデータのやりとりの仕方

Props

親<index.htmlというかApp.vue>から子<components.vue>にデータを引き渡す時に使う
↓子コンポーネント

<template>
  <p :class="props.class">{{ props.message }}{{ props.name }}</p>
</template>

<script setup lang="ts">
const props = defineProps({
  message: {
    type: String,
    default: ""
  },
  name: String,
  class: String,
})
</script>

interfaceを使った方が送りたい値が分かりやすく楽にまとめれる

<template>
  <section>
    <h2>Propsの処理</h2>
    <p :class="aaa.class">{{ aaa.message }}{{ aaa.name }}</p>
  </section>
</template>

<script setup lang="ts">
interface Props {
  class: String;
  message: String;
  name?: String;// ?をつけると親にデータがなくても大丈夫　必須ではないになる
}

const aaa = defineProps<Props>();
</script>
</script>

↓親コンポーネント

<子コンポーネント名 class="active" message="こんにちは" name="vvv" />

詳しく書かれている参考サイトへ

Emit

子<components.vue>から親<index.htmlというかApp.vue>にデータを引き渡す時に使う
App.vue(props) → Hello.vue(emit) → App.vue のような流れ
イベント処理に使う感じ
↓子コンポーネント

<template>
<button @click="emitSubmit">送信</button>
</template>
<script setup lang="ts">
// 親で使う属性を入れる
const emit = defineEmits(["submit"])
const emitSubmit = function():void {
 emit("submit")
}
</script>

親コンポーネント

<template>
<子コンポーネント名 v-on:`emitで渡した変数名`="親内にある関数など" />
<p>{{content}}</p>
</template>
<script setup lang="ts">
import {ref} from "vue";
const content = ref<string|number>('')
const 親内にある関数など = function():void {
 console.log("emit");
 content.value = "emit" 
}
</script>

参考サイト

---

感想

Propsは動きやどう言う時に使うと便利などはわかるが
Emitに関してはまだよくわかっていない。
今後勉強して慣れていくしかないだろう。