$refsの利用 $refsは、特定のコンポーネントインスタンスまたはDOM要素への参照を取得するために使用されます。コンポーネントまたはDOM要素を参照することで、そのプロパティやメソッドにアクセスできます。

基本的な使い方 コンポーネントにref属性を追加し、JavaScript内で$refsを通じてアクセスします。

<!-- コンポーネントにref属性を設定 -->
<user-profile ref="profileComponent"></user-profile>

<!-- JavaScript内で参照を取得 -->
<script>
export default {
  mounted() {
    // コンポーネントインスタンスへのアクセス
    const profile = this.$refs.profileComponent;
    console.log(profile.userName);
    profile.updateProfile();
  }
}
</script>

重要な注意点

mountedライフサイクルフック内で$refsを使用する場合、DOMが完全にロードされていない可能性があるため、注意が必要です。 メソッド内で$refsを使用する場合は、this.$nextTick()を利用してページのレンダリング完了を待つのが安全です。

$parentの利用 $parentは、親コンポーネントのインスタンスを取得するために使用されます。JavaScriptのparentNodeとは異なり、Vueコンポーネント専用の機能です。

基本的な使い方

<!-- 親コンポーネント -->
<template>
  <child-component></child-component>
</template>
<script>
export default {
  data() {
    return {
      parentValue: '親コンポーネントの値'
    }
  }
}
</script>

<!-- 子コンポーネント -->
<template>
  <button @click="accessParent">親の値を変更</button>
</template>
<script>
export default {
  methods: {
    accessParent() {
      // 親コンポーネントのプロパティにアクセス
      this.$parent.parentValue = '新しい値';
    }
  }
}
</script>

複数の親コンポーネントからの呼び出し 子コンポーネントが複数の親コンポーネントから呼び出される場合、$parentはそれぞれの呼び出し元の親コンポーネントインスタンスを返します。各親コンポーネントのプロパティを個別に変更できます。

$childrenの利用 $childrenは、親コンポーネント内のすべての子コンポーネントインスタンスのコレクションを取得します。JavaScriptのchildNodesとは異なり、Vueコンポーネントのみを対象とします。

基本的な使い方

<!-- 親コンポーネント -->
<template>
  <user-list></user-list>
  <admin-panel></admin-panel>
</template>
<script>
export default {
  mounted() {
    // 子コンポーネントの配列を取得
    const children = this.$children;
    console.log('子コンポーネント数:', children.length);
    
    // 特定の子コンポーネントにアクセス
    if (children[0]) {
      children[0].refreshData();
    }
  }
}
</script>

注意点 $childrenは子コンポーネントの配列を返しますが、配列の順序は保証されないため、特定の子コンポーネントにアクセスする場合は注意が必要です。