LoginSignup
0
1

More than 3 years have passed since last update.

親から子にデータを渡す方法

Posted at
Parent.vue
<template>
<!-- ⑴子コンポーネントのタグに、v-bindで送りたいものに名前をつける
        今回はテキトーに'送りたいものbox(okuritaimonobox)'としました
     ⑵=""のなかに、送りたいデータのプロパティ名をつける
        今回は'送りたいものネーム(okuritaimononame)'としました -->
<children v-bind:okuritaionobox="okurimononame" />
</template>

<script>
data(){
 return {
     okurimononame:'これを送りたい'
    }
  }
</script>
Children.vue
<script>
 export default {
//子コンポーネントではpropsというデータの受け口を作り、親コンポーネントのv-bindでつけた名前で受け取る
  // 今回は送りたいものボックス(okuritaimonobox)
  props:['okuritaimonobox'],
  computed:{
//okuritaimonoboxの中のデータはこのインスタンス内のデータとして普通に'this'と書いてOK
   return this.okurimononame
 // 結果 : これを送りたい
  }
 }!
</script>
0
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
0
1