Vue.jsのコンポーネントプロップの紹介

getdocs

3年前

Vue.jsを使用してコンポーネントを作成すると、親子階層内であっても、コンポーネントが親または子について何も知らないことがすぐにわかります。子コンポーネントにデータを渡したい場合は、小道具を使用します。小道具は、コンポーネント間で動的リアクティブデータを渡す簡単な方法です。

データの受け渡し

親コンポーネントと子コンポーネントがあり、親のpreciousThingデータプロパティを子に渡したいとします。これは、バインディング式を使用して行うことができます。バインディング式は、親コンポーネントのスコープ内の値にアクセスする v-bind：または：プレフィックスを持つ属性です。

ParentComponent.vue

<template>
  <child-component :myProp="preciousThing"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },

  data() {
    return {
      preciousThing: 'ring'
    }
  }
}
</script>

次に、それを受け入れるために、子コンポーネントは、myPropプロパティが渡されることを宣言する必要があります。

ChildComponent.vue

<template>
  <h2>The precious thing: {{myProp}}</p>
</template>

<script>
export default {
  props: [
    'myProp'
  ]
}
</script>

それで全部です！これで、子コンポーネントはthis.myPropにアクセスできるようになります。親コンポーネントでpreciousThingが変更されると、子コンポーネントのmyPropプロパティも更新されます。

警告

文字通りの小道具

リテラル文字列を子コンポーネントに渡すだけの場合は、バインディング式（ v-bind：または：）は必要ありません。これはよくある間違いです。むしろ、 myProp =“ string”などの通常のHTML属性として渡すだけです。ただし、数値またはブール値を渡したい場合でも、バインディング式（：myProp =“ boolean” ）を使用する必要があります。

渡されたデータの変更

小道具を介して子コンポーネントに渡されるプリミティブ値は変更できません。これを行おうとすると、Vueは警告をスローします。ただし、オブジェクトや配列などの複雑な値は、再割り当てすることはできませんが、変更することはできます。これはあらゆる種類の反応性の問題を引き起こす可能性があるため、そうすることは強くお勧めしません。代わりにいくつかの選択肢があります。

親コンポーネントにデータを戻す場合は、eventsを使用します。
親と子の間でデータの同期を維持するには、v-modelを使用します。
親から渡されたプロパティを再フォーマットしたいが、それをリアクティブに保ちたい場合は、計算されたプロパティを使用してください。
最初に渡された小道具だけが必要で、子のそこから変更したい場合は、初期化時に親から渡された初期値にデータプロパティを割り当てます。