MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. データ渡し(子コンポーネント → 親コンポーネント)

データ渡し(子コンポーネント → 親コンポーネント)

Vue.js
2024.06.02

子から親へデータを渡すには、$emitメソッドを使用します。
子でイベントを発生させ、親でそのイベントを受け取り、データを処理します。

データ渡し(子コンポーネント → 親コンポーネント)
記法

【親コンポーネント】
<コンポーネント @親コンポーネントのイベント名=”メソッド名”></コンポーネント>

【子コンポーネント】
$emit(“親コンポーネントのイベント名”, “送信データ”);

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>子から親へのデータ渡しについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="app"></div>

    <!-- CDN -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// 親コンポーネントの作成
Vue.createApp({
  data() {
    return {
      receivedMessage: "", // 子から受け取ったメッセージを保存する変数
    };
  },
  methods: {
    handleChildMessage(message) {
      this.receivedMessage = message; // 子からのメッセージを受け取るメソッド
    },
    resetMessage() {
      this.receivedMessage = ""; // メッセージをリセットするメソッド
    },
  },
  template: `
    <div class="parent-component">
      <p class="message-display">親コンポーネント：{{ receivedMessage }}</p>
      <child-component @message-sent="handleChildMessage"></child-component>
      <button class="reset-button" @click="resetMessage">リセット</button>
    </div>
  `,
})
  .component("child-component", {
    data() {
      return {
        message: "こんにちは、親コンポーネント！", // 送信するメッセージ
      };
    },
    methods: {
      sendMessage() {
        this.$emit("message-sent", this.message); // 親にメッセージを送る
      },
    },
    template: `
    <div class="child-component">
      <button class="send-message-button" @click="sendMessage">親にメッセージを送る</button>
    </div>
  `,
  })
  .mount("#app");
.parent-component {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  margin: 50px auto;
  text-align: center;
}

.message-display {
  margin-bottom: 20px;
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

.child-component {
  margin-top: 20px;
}

.send-message-button,
.reset-button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 16px;
  margin: 10px;
}

.send-message-button:hover,
.reset-button:hover {
  background-color: #45a049;
}

.reset-button {
  background-color: #f44336;
}

.reset-button:hover {
  background-color: #e53935;
}
出力結果
Vue.js