Vue.js(v2, v3)のrefsの使い方（親から子の要素参照)

refsを使うことで親コンポーネントから子コンポーネントを参照することができる

テキストエリアやテキストボックスの内容を取得したり、子コンポーネントのメソッドを実行することができる

サンプル

子コンポーネント

<template>
    <div>
        <input type="test" v-model="text" />
        <textarea v-model="textArea"></textarea>
    </div>
</template>
<script>
export default({
    data : function (){
        return {
            text: '',
            textArea: '',
        }
    }
})
</script>

親コンポーネント

<template>
  <div id="app">
    <text-and-text-area ref="texts" />
    <button @click="testAction">test</button>
  </div>
</template>

<script>
import TextAndTextArea from './components/TextAndTextArea.vue'

export default {
  name: 'App',
  components: {
    TextAndTextArea
  },
  mounted: function (){
    console.log(this.$refs.texts);
  },
  methods: {
    testAction: function () {
      console.log(this.$refs.texts.text); // テキストボックスの入力値が参照できる
      console.log(this.$refs.texts.textArea); // テキストエリアの入力値が参照できる
    }
  }
}
</script>