MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. データ渡し(簡素化)

データ渡し(簡素化)

Vue.js
2024.06.07

Provide / Injectは、
親コンポーネントが子コンポーネントにデータや機能を供給し、子コンポーネントがそれを受け取る仕組みです。

データ渡し(簡素化)
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Provide / Injectについて</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({
  setup() {
    // リアクティブなデータを提供
    const sharedData = Vue.reactive({
      message: "これは共有されたリアクティブデータです",
    });
    Vue.provide("sharedData", sharedData);

    return { sharedData };
  },
  template: `
    <div class="container">
      <div class="title">Provide / Injectの例</div>
      <parent-component></parent-component>
      <div class="label">【親コンポーネントのデータ】</div>
      <div class="message">{{ sharedData.message }}</div>
    </div>
  `,
})
  // 子コンポーネントの作成
  .component("parent-component", {
    template: `
    <div>
      <child-component></child-component>
    </div>
  `,
  })
  // 孫コンポーネントの作成
  .component("child-component", {
    template: `
    <div>
      <grandchild-component></grandchild-component>
    </div>
  `,
  })
  // ひ孫コンポーネントの作成
  .component("grandchild-component", {
    setup() {
      // リアクティブなデータを注入
      const sharedData = Vue.inject("sharedData");
      return { sharedData };
    },
    template: `
    <div class="child-container">
      <input v-model="sharedData.message" placeholder="メッセージを変更" class="input">
      <div class="label">【孫コンポーネントで注入されたデータ】</div>
      <div class="child-message">{{ sharedData.message }}</div>
    </div>
  `,
  })
  .mount("#app");
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  background-color: #f7f7f7;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.title {
  font-size: 2em;
  margin-bottom: 20px;
  line-height: 1.5;
  color: #333;
}
.label {
  font-weight: bold;
  margin-top: 20px;
  line-height: 1.8;
  color: #333;
}
.message {
  font-size: 1.2em;
  margin-top: 10px;
  line-height: 1.8;
  color: #333;
}
.child-container {
  margin-top: 20px;
}
.input {
  padding: 10px;
  font-size: 1em;
  width: 80%;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
  line-height: 1.8;
}
.child-message {
  font-size: 1.1em;
  color: #555;
  line-height: 1.8;
}
出力結果
Vue.js