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

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

Vue.js
2024.06.02

親は子に属性としてデータを渡し、子コンポーネントはそのデータを props で受け取ります。

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

【親コンポーネント】
<コンポーネント :属性名=”データ”></コンポーネント>

【子コンポーネント】
props: [“属性名”]

<!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">
      <!-- 親コンポーネント -->
      <parent-component></parent-component>
    </div>

    <!-- CDN -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// 子コンポーネント (ChildComponent.vue)
const ChildComponent = {
  props: ["message"],
  template: `
    <div class="child">
      <p>{{ message }}</p>
    </div>
  `,
};

// 親コンポーネント (ParentComponent.vue)
const ParentComponent = {
  components: {
    "child-component": ChildComponent,
  },
  data() {
    return {
      parentMessage: "こんにちは、これは親コンポーネントからのメッセージです！",
    };
  },
  template: `
    <div class="parent">
      <p>親コンポーネント</p>
      <child-component :message="parentMessage"></child-component>
    </div>
  `,
};

// Vue アプリケーションの作成とマウント
Vue.createApp({
  components: {
    "parent-component": ParentComponent,
  },
}).mount("#app");
.parent {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.child {
  border: 1px solid #aaa;
  padding: 10px;
  background-color: #f9f9f9;
}
出力結果
Vue.js