vm.$parentについて

Vue.js

2024.03.27

vm.$parentは、Vue.jsのインスタンスの親インスタンスへの参照を保持する特別なプロパティです。Vue.jsでは、コンポーネントツリーがネストされた構造を持つ場合、コンポーネントは親コンポーネントによってネストされます。このような場合、子コンポーネントは親コンポーネントへの参照が必要な場合があります。vm.$parentは、そのような状況で親コンポーネントにアクセスするための手段として使用されます。

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

<!-- ParentComponent.vue -->
<template>
  <div>
    <h2>Parent Component</h2>
    <ChildComponent />
  </div>
</template>

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

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

<!-- ChildComponent.vue -->
<template>
  <div>
    <h3>Child Component</h3>
    <p>Parent's message: {{ $parent.message }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$parent); // ParentComponent instance
  }
};
</script>

この例では、ParentComponent.vueが親コンポーネントであり、ChildComponent.vueが子コンポーネントです。子コンポーネントのtemplate内では、$parentを使用して親コンポーネントのデータやメソッドにアクセスしています。また、mountedフック内でthis.$parentをコンソールに出力することで、親コンポーネントのインスタンスにアクセスしています。

注意点として、$parentを使って親コンポーネントにアクセスすることができますが、コンポーネントが再利用可能であるべきという原則に反してしまう場合があるため、できるだけ親子間でのデータの伝達はプロパティとイベントを使用することが推奨されます。