Edited at

[Vue]親コンポーネントの変数を子コンポーネントに送る〜親から子への贈り物〜


今日のコード


親コンポーネント


親コンポーネント1

<div :c_item="p_item"> <!-- p_item変数を子へ送る -->



親コンポーネント2

components:{

child,
hogehoge,
fugafuga,
},


親コンポーネント3

import child   from '~/components/child/child.vue’

import hoge from
'~/components/hoge/hoge.vue
import fuga from '~/components/fuga/fuga.vue’


子コンポーネント


子コンポーネント1-1

props:['c_item']



子コンポーネント1-2

props:{

c_item: {
type: String, // String型に限定
default: YYY, // 何もなければ「YYY」とする
}
}


解説


渡す方である親の準備

まずは、親側から。

親コンポーネントで「p_item」という変数が使われているとして、これを子コンポーネントに送りたいとする。

まずは、親コンポーネントのタグ内で


親コンポーネント1

<div :c_item="p_item"> <!-- p_item変数を子へ送る -->


と、このように用意する。これで、子コンポーネントには「c_item」という名前で送ることになる。

さらに、親コンポーネントの中に、


親コンポーネント2

components:{

child,
hoge,
fuga,
},

このように書くことで、親コンポーネントは、「child」「hoge」「fuga」コンポーネントを子として、これらを変数の送り先とする、というように設定してる。

親コンポーネントには、


親コンポーネント3

import child   from '~/components/child/child.vue’

import hoge from
'~/components/hoge/hoge.vue
import fuga from '~/components/fuga/fuga.vue’

このような記述もし、「child」「hoge」「fuga」コンポーネントが実際、どこのなんのファイルのことを指すか、指定しておく。

これで、親側の準備はOK。


もらう方である子の受け取り方

子コンポーネントは非常にシンプルで、


子コンポーネント1-1

props:['c_item']


このように「c_item」として受け取った変数を、そのままこのファイル内でも「c_item」として使えるようになる。

ちなみに、このpropsには違う書き方もあって、


子コンポーネント1-2

props:{

c_item: {
type: String, // String型に限定
default: YYY, // 何もなければ「YYY」とする
}
}

このように型を指定したり、デフォルト値を設定したりもできる。


感想

与える方である親の準備を他所に、もらう方である子は至れり尽くせりというのは、世の常かな。

とか思った。(大きく脱線)

最後まで、ありがとうございました。