LoginSignup
1
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-06-19

今日のコード

親コンポーネント

親コンポーネント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」とする
    }
}

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

感想

与える方である親の準備を他所に、もらう方である子は至れり尽くせりというのは、世の常かな。
とか思った。(大きく脱線)

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

1
1
0

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
  3. You can use dark theme
What you can do with signing up
1
1