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>
子コンポーネント側で先ほどの様に{{}}波括弧を２つ書いたもの(”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
},
]
}
}
親コンポーネント側でこの様な記述をします。注意点は以下。
- :keyを絶対に入れなきゃいいけない(リストレンダリング #状態の維持)
- バッククオートはいらない（文字列じゃないから）
- user-idと渡しているものは子コンポーネント側ではuserIdとなってくれる(プロパティ #プロパティの形式)
dataについて
そのコンポーネントで使用するデータ（子コンポーネントに渡すものも含む）を定義しておく場所
多分大体storeとかから取得したデータが入ってる場所と考えるべき？(computedなどと併用して)
注意点1. コンポーネントでのdataは関数にする
コンポーネントじゃなかったらオブジェクトでよかったですよね
Vue インスタンス #データとメソッド
最後に
mapStateを使ってstoreからデータを取得してほにゃらららへんはちょっとまだ勉強中なので、理解したら記事を書きます