search
LoginSignup
24

More than 3 years have passed since last update.

posted at

propsとdataの違い、propsについて

TL;DR

他の使い方もあるだろうけど、とりあえず大体以下じゃね?って解釈

  • props
    • 親コンポーネントから渡されるであろう値を自コンポーネントに定義しておくやつ
  • data
    • storeから取得されるデータの形など(を定義しておこう)

はじめに

vueの例は単一ファイルコンポーネントで記入します
また、propsとdataの比較記事かと思いきやほぼpropsの事しか話していません。
dataについては多分別記事で書くよ
多分

propsについて

コンポーネントの基本 #プロパティを使用した子コンポーネントへのデータの受け渡し

親コンポーネントから子コンポーネントに値を渡す際に使用されるのがpropsです。

親コンポーネント

<Content title='`ほげ`' />

子コンポーネント

<template>
  <div>{{ title }}</div>
</template>

export default {
  name: 'Content',
  props: ['title']
}

注意1. propsの形式

上ではわかりやすさのためにただの文字列として渡しましたが、本当は以下の様にどの様な値が来るかまで書いておく方が好ましいです。
(Props should at least define its types)

子コンポーネント


export default {
  name: 'Content',
  props: {
    title: {
      type: String,
      required: true
    }
  }
}

プロパティ #プロパティの型

注意2. propsをHTMLの内容に渡す時と属性に渡す時

HTMLの内容に渡す時

<template>
  <div>{{ title }}</div>
</template>

子コンポーネント側で先ほどの様に{{}}波括弧を2つ書いたもの(”Mustache” 構文(二重中括弧))でくくればOK

HTMLの属性に渡す時

<template>
  <div :class="title">ここはベタ書き</div>
</template>

子コンポーネント側でv-bindを使用することで渡されたprops要素が入り込む様になっている

注意3. 親コンポーネントでの渡し方について

ベタ書きの時(あんまないと思うけど)

<Content title='`ほげ`' />

親コンポーネント側でバッククオートで囲いながらベタ書きすればOK(当たり前のことを言っている人)
文字列として判断させたいため、バッククオートで囲う

dataとかから取得する場合

v-forと交えながら書きます(コンポーネントに渡す時data使うなら大体v-for使うだろという仮定)

<template>
...
<Content 
  v-for="item in items"
  :key="item.id" :id="item.id"
  :content="item.content"
  :user-id="item.userId"
/>
</template>

export default {
  data: function() {
    items: [
       {
          id: 1,
          content: 'ぴよぴよ',
          userId: 3
       },
       {
          id: 2,
          content: 'わんわん',
          userId: 4
       },
    ]
  }
}

親コンポーネント側でこの様な記述をします。注意点は以下。

dataについて

そのコンポーネントで使用するデータ(子コンポーネントに渡すものも含む)を定義しておく場所
多分大体storeとかから取得したデータが入ってる場所と考えるべき?(computedなどと併用して)

注意点1. コンポーネントでのdataは関数にする

コンポーネントの基本 #dataは関数でなければいけません

コンポーネントじゃなかったらオブジェクトでよかったですよね
Vue インスタンス #データとメソッド


最後に

mapStateを使ってstoreからデータを取得してほにゃらららへんはちょっとまだ勉強中なので、理解したら記事を書きます

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
24