vm.$refsについて

vm.$refsは、Vue.jsのインスタンスが参照する要素やコンポーネントへの参照を保持するプロパティです。Vue.jsでは、DOM要素や子コンポーネントに対して直接アクセスする必要がある場合に、ref属性を使用して参照を作成します。そして、vm.$refsを使用してそれらの参照にアクセスします。

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

<template>
  <div>
    <button @click="logMessage">Click me</button>
    <child-component ref="childRef"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    logMessage() {
      const childRef = this.$refs.childRef;
      console.log(childRef); // child component instance
      childRef.doSomething(); // call a method of child component
    }
  }
};
</script>

上記の例では、<child-component>コンポーネントにref属性を使ってchildRefという参照を付けています。その後、vm.$refsを使ってこの参照を取得し、logMessageメソッド内で子コンポーネントのインスタンスにアクセスしています。そして、childRefを使って子コンポーネントのメソッドを呼び出すことができます。

vm.$refsは、Vue.jsのインスタンスが直接DOM要素やコンポーネントにアクセスするための便利な方法ですが、通常はプロパティやイベントを使用してデータの受け渡しを行う方が推奨されます。直接的なDOM操作やコンポーネント間の通信は、Vue.jsのリアクティブな機能と合わせて使用することが重要です。