$refsの使用例

$refs は、Vue.jsコンポーネント内で特定のDOM要素や子コンポーネントのインスタンスにアクセスするための方法を提供します。

DOM要素へのアクセス: $refs を使用すると、Vue.jsコンポーネント内のDOM要素に直接アクセスできます。これにより、DOM要素に対して直接操作を行うことができます。たとえば、特定のDOM要素にフォーカスを設定したり、スタイルを変更したりすることができます。例えば、以下のコードでは、テンプレート内のinput要素に $refs を使用してアクセスし、フォーカスを設定しています。

<template>
  <input ref="inputRef" type="text">
</template>

<script>
export default {
  mounted() {
    this.$refs.inputRef.focus(); // input要素にフォーカスを設定
  }
}
</script>

子コンポーネントへのアクセス: $refs を使用して、親コンポーネントから子コンポーネントのインスタンスにアクセスすることもできます。これにより、子コンポーネントのメソッドを呼び出したり、子コンポーネントのプロパティにアクセスしたりすることができます。

以下の例では、親コンポーネントから子コンポーネントのメソッドを呼び出しています。

<template>
  <child-component ref="childRef"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  mounted() {
    this.$refs.childRef.childMethod(); // 子コンポーネントのメソッドを呼び出し
  }
}
</script>

これらの例からわかるように、$refs を使用することで、Vue.jsコンポーネント内でDOM要素や子コンポーネントのインスタンスにアクセスできます。ただし、できるだけ使用を避け、代わりにデータバインディングやプロパティ・イベントの双方向バインディングなどの他の手段を検討する方が好ましいとされています。