Vue3 props プロパティ

Vue3 选项式 APIVue3 オプションAPI

propsはコンポーネント間でデータを渡す方法のひとつです。

Vue.js では、親コンポーネントはpropsデータを子コンポーネントに渡すことができます。子コンポーネントはこれらのデータを受け取った後、データに基づいてレンダリングやその他の操作を実行できます。

たとえ話で理解する

はprops郵便配達員に例えることができます。親コンポーネントは差出人、子コンポーネントは受取人です。親コンポーネントはデータ（手紙）をprops（郵便配達員）を通じて子コンポーネントに渡します。子コンポーネントはデータを受け取った後、データの内容に基づいて処理できます。

props の使い方は？

Vue.js での props の使用はpropsとても簡単です。以下では、例を通してその使い方を説明します。props。

例：props の受け渡しと受け取り

親コンポーネントとParentComponent子コンポーネントがあるとします。ChildComponent。親コンポーネントから子コンポーネントにメッセージを渡したいとします。

1. 親コンポーネント（ParentComponent.vue）

実例

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  }
};
</script>

2. 子コンポーネント（ChildComponent.vue）

実例

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

解説

  1. 親コンポーネント：親コンポーネントでは、props を通じて:message="parentMessage" 将 parentMessageデータを子コンポーネントに渡します。parentMessageは親コンポーネントで定義された変数で、その値は'Hello from Parent!'。

  2. 子コンポーネント：子コンポーネントでは、props を使用してprops親コンポーネントから渡されたデータを受け取ります。messageは子コンポーネントで定義された props でprops、その型はString、そしてrequired: true、これはprops必須であることを示しています。

  3. レンダリング：子コンポーネントはmessageprops を受け取った後、それをテンプレートにレンダリングして、次のように表示します。<p>Hello from Parent!</p>。

props の型と検証

Vue.js では、props型と検証ルールを指定して、渡されるデータが期待どおりであることを保証できます。

例：型と検証

実例

props: {
  message: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    default: 18
  },
  hobbies: {
    type: Array,
    validator: function (value) {
      return value.length > 0;
    }
  }
}

解説

  1. **type**：指定するのはpropsprops のデータ型です。指定できるのはString、Number、Boolean、Array、Objectなどです。

  2. **required**：指定するのはpropsprops が必須かどうかです。もし必須に設定された場合true、親コンポーネントはその props を渡す必要がありprops、そうしないと警告が表示されます。

  3. **default**：props にpropsデフォルト値を設定します。親コンポーネントがその props を渡さなかった場合props、子コンポーネントはデフォルト値を使用します。

  4. **validator**：カスタム検証関数で、検証するのはpropsprops の値が特定の条件を満たすかどうかです。

注意事項

  1. 単方向データフロー：Vue.js では、propsprops は単方向であり、データは親コンポーネントから子コンポーネントへのみ流れます。子コンポーネントは直接変更すべきではありません。props値を変更する必要がある場合は、イベントを発火して親コンポーネントに通知し、変更してもらいます。

  2. 命名規則：propsprops の命名にはキャメルケースを推奨します。例：userName。親コンポーネントでpropsprops を渡す際は、ハイフン区切りの使用を推奨します。例：user-name。

  3. 動的 props：v-bind によってv-bind 或 :props を動的にバインドできますprops。例えば:message="parentMessage"。

Vue3 选项式 APIVue3 オプションAPI

その他の拡張