[Vue.js] 子コンポーネント内の DOM の参照を取得する

はじめに

たとえば以下のようなコンポーネントがあったとします。

InputComponent.vue

<template>
  <input type="text" class="form-control">
</template>

今回はこのコンポーネントを利用する親コンポーネントから、コンポーネント内部の input タグへの参照を取得することを目指します。
親からフォーカスを当てたい時などに使えると思います。
Vue のバージョンは３系を前提とし、 Composition API を利用します。

親コンポーネント

まず親からどうやって使うかを考えてみます。
単純に子コンポーネントを ref で参照すると、残念ながらDOMではなくコンポーネントインスタンスへの参照になってしまいます。

ParentComponent.vue

<template>
  <input-component ref="inputRef" />
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import InputComponent from './components/InputComponent.vue'

export default defineComponent({
  components: {
    InputComponent,
  },
  setup() {
    const inputRef = ref<HTMLInputElement | undefined>()
    onMounted(() => {
      // HTMLInputElement ではなくコンポーネントインスタンスが取得される
      // 当然 focus メソッドなど存在しない
      console.log(inputRef.value)
    })
    return {
      inputRef
    }
  }
})
</script>

では子コンポーネントからどうやってデータ（DOM）を上げるかというと、 v-model (= emit )を利用します。
２系の場合は sync 修飾子 です。

ParentComponent.vue

<template>
  <input-component v-model:inputRef="inputRef" />
</template>

これで子コンポーネントからDOMを取得する準備ができました。

子コンポーネント

子コンポーネントでは、 ref で取得したDOMの参照を emit を通して上げるだけです。

InputComponent.vue

<template>
  <input type="text" class="form-control" ref="ref">
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'

export default defineComponent({
  props: {
    inputRef: {
      type: HTMLInputElement,
    },
  },
  setup(props, { emit }) {
    const ref = computed<HTMLInputElement | undefined>({
      get() {
        return props.inputRef
      },
      set(value) {
        emit('update:inputRef', value)
      }
    })

    return {
      ref
    }
  }
})
</script>

ref に WritableComputed を渡すのがポイントです。 set で emit() します。

おわりに

親から子コンポーネント内部のDOMの参照を取得できるようになりました。
id を渡して getElementById を呼んだり、または子コンポーネントに focus メソッドを用意してコンポーネントインスタンスを直接参照する方法などもありますが、個人的にはこちらのほうがすっきりしてていいと思います。
Atomic Design などで設計する時の参考になれば。