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について調べていて、変数名や関数名が似たり寄ったりで目が泳いだので、記号的な書き方にしてみました。