【Nuxt.js】親から子に変数を渡す方法【vue.js】

Question

現在親コンポーネントから子コンポーネントにdataを渡そうとしているのですが、うまくいきません。propsにv-bindした変数を設定しているのですが、うまくいきません。

//親コンポーネント
<template>
  <Test v-model="value"/>
</template>

<script>
export default {
  components: {
    Test: () => import('@/components/main/test.vue'),
  },
  data() {
    return {
      value: {
        id: "",
        width: 0,
        height: 0,
      },
    }
  },
}
</script>

//子コンポーネント
<template>
  <p>{{ value }}</p>
</template>

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

#追記
下記方法でもpropsデータがundefindになってしまいました。

//親コンポーネント
<template>
  <test :value="value"/>
</template>

<script>
export default {
  components: {
    Test: () => import('@/components/main/test.vue'),
  },
  data() {
    return {
      value: {
        id: "",
        width: 0,
        height: 0,
      },
    }
  },
}
</script>

//子コンポーネント
<template>
  <p>{{ value }}</p>
</template>

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

Answer 1

<!-- <Test v-model="value"/> -->
<test v-bind:value="value"/>

タグを小文字にしてください。
また、子のpropsを指定してv-bind:valueもしくは:valueにvalueを渡せば動くと思います。

Comments

[tokuwgawa]

タグを大文字にしていたからpropsにデータを渡せなかったということですか？
<Test :value="value"/>
で行っても通らなかったのですが、大文字原因ですかね？

[tokuwgawa]

追記にコード書きますのでお手すきの際によければアドバイスお願いいたします。

[suzu6]

調べ直したら、タグは大文字でも大丈夫でした。失礼しました。
https://jp.vuejs.org/v2/guide/components-registration.html

v-bindで動かないとなると何でしょうか。しらべてみます。

[suzu6]

nuxtjsの環境があったのでコピペしたら動きました。
v-modelでもv-bind:valueでも大丈夫そうです。

ソースではなく他に原因があると思うので、ログやパスの確認をすると良いかもしれません。

[tokuwgawa]

なるほど。。
わざわざ検証ありがとうございました。
いろんなサイトの方法で試したのですが、通らなかったので、そっちの問題でしたか。。