今日のコード
親コンポーネント
親コンポーネント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」とする
}
}
このように型を指定したり、デフォルト値を設定したりもできる。
感想
与える方である親の準備を他所に、もらう方である子は至れり尽くせりというのは、世の常かな。
とか思った。(大きく脱線)
最後まで、ありがとうございました。