0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue.jsまとめ⑥ コンポーネント間でデータを受け渡す方法

Posted at

下書きが上限に達しているので仮の状態で投稿しています

○親から子に
子でexport内で
props:["名前"] もしくは 
props:{
 名前:値の型 #バリデーションをしている、値の型をオブジェクトにすればさらにバリデーションできる
}
親でコンポーネントタグ内で
v-bind:名前 = "渡したい値"

propsの名前はキャメルケース(likeNumber)かケバブケース
propsは配列かオブジェクトにすることで複数にできる
propsは配列とオブジェクトは参照渡しだから注意が必要

○子から親(データを変えるわけではない)
子の関数内で
this.$emit("名前", 処理内容)
親のコンポーネントタグ内で
v-on:名前="変数 = $event" など 
#関数に渡した場合
関数(引数){
 this.number = 引数; #v-onで引数がなくても引数に値が渡される
}

$emitはカスタムイベントを作ることができる
ケバブケースで書く

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?