概念

Vue.jsにおける$refsは、Vueコンポーネント内で要素や子コンポーネントにアクセスするための特別なプロパティです。

$refsを使用すると、Vueコンポーネント内でDOM要素や子コンポーネントへの参照を直接取得できます。これにより、直接要素を操作したり、子コンポーネントのメソッドやプロパティにアクセスしたりすることができます。

例

// Vueコンポーネント内の例
<template>
  <div>
    <input ref="myInput" type="text" />
    <button @click="focusInput">フォーカスする</button>
    <child-component ref="myChildComponent"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.myInput.focus();  // $refsを使用してinput要素にフォーカスを設定
      this.$refs.myChildComponent.doSomething();  // $refsを使用して子コンポーネントのメソッドを呼び出し
    }
  }
}
</script>

上記の例では、$refsを使用して直接<input>要素と<child-component>にアクセスしています。focusInputメソッドでは、this.$refs.myInput.focus()を呼び出して<input>要素にフォーカスを設定し、this.$refs.myChildComponent.doSomething()を呼び出して子コンポーネントのdoSomethingメソッドを実行しています。

$refsは一般的には非推奨であり、コンポーネント間のデータフローをより明示的にするために他の手法（propsやイベント）を使用することが推奨されています。ただし、特定の場合においてDOM要素や子コンポーネントに直接アクセスする必要がある場合には、$refsを使用することができます。