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

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

#親
<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で渡した変数の表示を行なってくれるでしょうか？
お手数をおかけしますがご回答いただけると幸いです。

FKM

2021/12/27 05:28 編集

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

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

回答1件

ベストアンサー

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

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

vue
1<template>
2 <Details :routeParameters="route_params"></Details>
3</template>

vue
1<script>
2props:[routeParameters'],
3export default {
4  name: "details",
5  data: function() { 
6  },
7  props: ['routeParamaters'],
8  created: async function(){
9    console.log(this.routeParamaters); //thisを用いて明示的に呼び出す
10    }
11}
12</script>