親componentから渡したpropsを子componentで確認する方法

Question

親componentから渡したpropsを子componentで確認する方法について質問させてください。

this.$propsで親から渡したpropsを確認できるらしいですが、

Uncaught TypeError: Cannot read property ‘$props’ of undefined
エラーが出てしまいます。このやり方で正しいのかもよくわかってない状況です。

親からpropsを渡す

<template>
  <div>
     <IconKey :sort_of_key="sort_of_key"/>
  </div>
</template>

子componentで親が渡したpropsを確認

<template>
//ここはconsole.log自体が使えない？
<span>
   <button>icon</button>
</span>
</template>

<script lang="ts">
console.log("this.$props:", this.$props); //errorになる
import { Component, Vue, Prop } from "vue-property-decorator";
type SortOfKey = 1 | 2;
@Component
export default class IconKey extends Vue {
  @Prop({ type: Number, required: true }) private sort_of_key!: SortOfKey;
  //ここはconsole.log自体が使えない？
}
</script>

なにか自分が勘違いしてる部分がありましたらご教示いただけますでしょうか。

また,<template></template>やclass中ではconsole.logが書けないようですが、書ける方法はありますでしょうか。

Answer 1

class のすぐ下はクラスのメンバー変数やメソッドを定義するところなので式や文を直接書くことはできません。メソッドの中に書きましょう。

export default class IconKey extends Vue {
  mounted() {
    console.log(this.$prop);
  }
}

Comments

[Kimsehwa]

ありがとうございます。大変助かりました！