vuejsの親→子へのprop渡しをオブジェクトで行う方法が知りたいです

表題の通り、Vuejsの親→子Componentへのprop渡しをオブジェクトで渡す方法を知りたいです。
多くのサンプルは"parantMsg"などの簡易的なメッセージしかなく困っております。
また公式マニュアルを見ても十分理解できなかったため、何卒ご教示頂ければ幸いです。

※parentObjを1.child.vueへ渡す方法と2.child.vueで受け取る方法が知りたいです。(今回は仮にfather_idとmother_idがあると仮定します)

parant.vue

<template>
  <div class="parent">
    <parent v-for="parent in parentObj" :fatherId="parent.father_id"></parent>
  </div>
</template>

<script>
import child from './child.vue';

export default {
    name: 'children',
    components: {
       child
    },
    data: function() {
        return {
            parentObj : [],
        }
    },
    created: function() {
      axios.get('/api/parent/')
      .
      .
      .
    }
}
</script>

child.vue

<template>
  <div class="child">
    {{fatherId}}
  </div>
</template>

<script>

export default {
    props: ['userId']
}
</script>

行動規範の内容に同意します

回答1件

ベストアンサー

そもそも、parant.vueの中でchild.vue使ってないですよね？

あと、child.vueもprops: ['userId']とあるならparant.vueのテンプレート内のchildタグのバインドプロパティに：userId＝"parent"（この値が子テンプレートに渡したいオブジェクトだと推測しています）としないと受け取ることもできませんし、
child.vue内でもいきなり{{fatherId}}が出てきても困るので:fatherId="parent.father_id"で渡そうとしているのならchild.vueにprops: ['userId', 'fatherId']とプロパティを定義してあげないといけない
あと、変数だけど何が何やらわからないので勝手に変更してみるけど

parant.vue

HTML
1<template>
2  <div class="parent">
3    <child v-for="childObj in parentObj.Children"
4        :fatherId="parent.father_id"
5        :vm="childObj"></child>
6  </div>
7</template>
8
9<script>
10//省略するね
11</script>
12

child.vue（子オブジェクトのプロパティにChildIdがあると仮定して）

HTML
1<template>
2  <div class="child">
3    {{fatherId}}の子「{{vm.ChildId}}」さんです？
4  </div>
5</template>
6
7<script>
8
9export default {
10    props: ['vm', 'fatherId']
11}
12</script>
13