(vue)子コンポーネントで親から渡した変数を取得できない

Question

恐らくレンダリングのタイミングの問題であるのか親コンポーネントから渡した変数を子コンポーネント側で表示できないです。

#親
<tenplate>
 <Details :route_paramaters="route_params"></Details>
</template>
<script>
import Details from '../views/details';
export default {
  data: function() { 
    return{
        route_params: null
    }
  },
    created: async function() {
        this.route_params = this.$route.params['id'] 
  },
</script>

以上の様に親側ではURLパラメータのidを取得して(vue-routerを使っています)、子コンポーネント(Detail)にroute_paramatersという名前で渡しています。子側では以下の様に記載しています。

<tenplate>
 <!--　省略 -->
</template>
<script>
export default {
  name: "details",
  data: function() { 
  },
  props: ['route_paramaters'],
  created: async function(){
    console.log(route_paramaters);
    }
}
</script>

しかしpropsで受け取る変数の名前をセットし、createdの中でconsole.logでログ出力をしてみましたが。
どうもうまくいかず、ReferenceError: route_paramaters is not definedというエラーが表示されてしまいます。
vueのライフサイクルの問題なのか、親で定義しているはずの変数が渡せないことに疑問を感じております。
どうすればconsole.logで渡した変数の表示を行なってくれるでしょうか？
お手数をおかけしますがご回答いただけると幸いです。

Comments

[FKM]

基本、Vueはスネークケース使わずにケバブケースを使います。あとpropsの受け渡しはパスカルケースに直すのが基本です。親コンポーネントをroute-paramsにして子コンポーネントのpropsを['routeParams']とするとどうなりますか？

Answer 1

親子コンポーネントのやりとりの場合でも、propsプロパティの値はスクリプト内で制御しているのでthis.xxxとして呼び出す必要があります。

※Vueではあまりスネークケースを使わないのでパスカルケースに直してます。

<template>
 <Details :routeParameters="route_params"></Details>
</template>

<script>
props:[routeParameters'],
export default {
  name: "details",
  data: function() { 
  },
  props: ['routeParamaters'],
  created: async function(){
    console.log(this.routeParamaters); //thisを用いて明示的に呼び出す
    }
}
</script>

Comments

[widget11]

なるほど明示的に呼び出すのですねありがとうございます！
あとvueのお作法としてスネークはあまり使わないのも知りませんでした！
ありがとうございます！！！