vueJSのemit

子コンポーネント

child.vue

<template>
  <button @click="CCCevent">ボタン</button>
  //①このボタンクリックしたら、同コンポーネントのCCCevent起動
</template>

<script setup>
const xxx = defineEmits();
//②親に打ち上げるための事前準備。defineEmitsをどこでもつかえるようにしておく。

const CCCevent = () => {
    xxx("xxxevent");
};
//③defineEmitsすることで親のxxxeventが発火
//親コンポーネントのタグに＠xxxeventがいる。
</script>

親コンポーネント

parent.vue

<template>
  <div>
    <Child @xxxevent="YYYevent" />
    //③子でxxxevent発火したら　右辺の名前のメソッドが実行される。
  </div>
</template>

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

const YYYevent = () => {
 console.log('発火したよ')
};
//最後にこのメソッドが実行される。
</script>

コンポーネントタグの＠はv-on
＠xxxだったら、そのコンポーネントの中でxxxという合図があったときに、ついでにやってくれるアクションを追加できる。

defineEmitsのimport必要ない

emitについて調べていて、変数名や関数名が似たり寄ったりで目が泳いだので、記号的な書き方にしてみました。

emitと一緒にデータを渡す方法

子コンポーネント

child.vue

<template>
  <button @click="CCCevent">ボタン</button>
  //①このボタンクリックしたら、同コンポーネントのCCCevent起動
</template>

<script setup>
//なにかしらのデータ　追記
const hogeOgject = {
  hogehoge //中略
};

const xxx = defineEmits();

const CCCevent = () => {
    xxx("xxxevent",hogeOgject);//hogeOgject追記
};
</script>

親コンポーネント

parent.vue

<template>
  <div>
    <Child @xxxevent="YYYevent" />
    //③子でxxxevent発火したら　右辺の名前のメソッドが実行される。
  </div>
</template>

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

//引数に入れるだけで受け取り完了
const YYYevent = (data) => {
 console.log('dataもらったよ')
};
</script>

第二引数に入れてあげてあげれば
xxx("xxxevent",hogeOgject);//hogeOgject追記
親のメソッドの引数に勝手に入る