$emitとは？

子コンポーネントから親コンポーネントに何かを伝えたい場合、$emitを使用して親コンポーネントにデータを送ります。

子コンポーネント内で $emitを使ってイベントを発生させ、 親コンポーネントでは そのイベントを検知して データを受け取ります。

サンプルコード

◼︎setupを使わない場合

子コンポーネントのコード

<template>
  <button @click="sendMessage">メッセージを送る</button>
</template>
  
  <script>
export default {
  methods: {
    sendMessage() {
      this.$emit("message", "子コンポーネントから送られたデータ");
    },
  },
};
</script>

親コンポーネントのコード

<template>
  <div>
    <child-component @message="handleMessage"></child-component>
    <p>{{ receivedMessage }}</p>
  </div>
</template>
<style scoped>
div {
  text-align: center;
}
</style>
<script>
import ChildComponent from "./TestComponent7_child.vue";

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      receivedMessage: "",
    };
  },
  methods: {
    handleMessage(message) {
      this.receivedMessage = message;
    },
  },
};
</script>

◼︎setupを使う場合

setupを使う場合、emitの代わりにdefineEmitsを使用します！

子コンポーネントのコード

<template>
  <button @click="sendMessage">を送る</button>
</template>
  
<script setup>
import { defineEmits } from "vue";

const emits = defineEmits(["message"]);

const sendMessage = () => {
  emits("message", "子コンポーネントから送られたデータ");
};
</script>

親コンポーネントのコード

<template>
  <div>
    <child-component @message="handleMessage"></child-component>
    <p>{{ receivedMessage }}</p>
  </div>
</template>
<style scoped>
div {
  text-align: center;
}
</style>
<script setup>
import ChildComponent from "./TestComponent7_child.vue";
import { ref } from "vue";
const receivedMessage = ref("");

const handleMessage = (message) => {
  receivedMessage.value = message;
};
</script>