vm.$propsについて

vm.$propsは、Vue.jsのインスタンス内で利用可能な特別なプロパティです。このプロパティは、親コンポーネントから渡されたプロパティの値を含むオブジェクトです。Vue.jsコンポーネントは、親コンポーネントからデータを受け取るためにプロパティを使用します。vm.$propsを使用することで、コンポーネント内でこれらのプロパティにアクセスすることができます。

以下は、vm.$propsの使用例です。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent message="Hello from parent!" />
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  mounted() {
    console.log(this.$props); // { message: "Hello from parent!" }
  }
};
</script>

この例では、親コンポーネント（ParentComponent.vue）が子コンポーネント（ChildComponent.vue）を含んでいます。子コンポーネントはmessageというプロパティを持ち、それは親コンポーネントから渡された文字列を表示します。ChildComponent.vue内のmountedフックでthis.$propsをコンソールに出力することで、vm.$propsによって受け取ったプロパティの値を確認することができます。

このようにして、vm.$propsを使用することで、Vue.jsコンポーネント内で親コンポーネントから渡されたプロパティにアクセスできます。これは、親子コンポーネント間でデータの受け渡しを行う際に役立ちます。