如何在 VueJs 组件中正确引用 HTMLElement

Question

我有一个简单的组件，它包含文本区域。我还有另一个简单的组件，它呈现一个按钮。单击按钮时，我想将焦点设置到文本区域。

这个简化的例子失败了：

    <template>
      <MyCommand @resize="testResize" />
    
      <TextArea ref="refElement" />
    </template>

    <script lang="ts">
    // ...

    export default defineComponent({
      name: 'SimpleComponent',
      setup(props, context) {
        const refElement = ref<HTMLElement | null>(null)

        const testResize = () => {
          console.log('resize test')

          if (refElement.value !== null) {
            refElement.value.focus()
          }
        }

        return {
          refElement,
          testResize,
        }
      }    
    </script>

TextArea 是一个很简单的组件，一些输入规范化，过于简单了：

    <template>
      <textarea v-model.trim="value" />
    </template>

我在控制台中得到“resize test”，所以 testResize 方法正在运行，但 refElement 为空。

Answer 1

当引用组件而不是 HTML 元素时，组件类型应该是 DefineComponent 而不是 HTMLElement。

可以通过 $el 属性引用被包裹的元素：

    <template>
      <MyCommand @resize="testResize" />
    
      <TextArea ref="refElement" />
    </template>

    <script lang="ts">
    // ...

    export default defineComponent({
      name: 'SimpleComponent',
      setup(props, context) {
        const refElement = ref<DefineComponent>()

        const testResize = () => {
          console.log('resize test')

          if (refElement.value) {
            refElement.value.$el.focus()
          }
        }

        return {
          refElement,
          testResize,
        }
      }    
    </script>

我不确定这是否是“最佳实践”，在我看来它是一种 hack。如果有人知道更好的解决方案，请发表评论。

Answer 2

您的退货中缺少refElement

return {
  testResize, refElement
}

更新

如果您正在处理一个组件，它会变得有点棘手。虽然您可以使用refElement.value.$el，但我想说这不是一个好主意。这仅在组件具有第一个子组件textarea 时才有效。这将导致一个脆弱的实现，如果你需要在某个时候改变它，它就会崩溃。恕我直言，您最好将 ref 作为道具传递给子组件。这也不是最佳实践，因为您应该向下传递道具并向上发出事件，但这将是实现的相当大的开销。不过，将ref 作为道具传递也有其自身的问题。如果模板中有ref，它会自动从 ref/propxy 转换为一个值。为了解决这个问题，您可以在设置中的函数refElement: () => refElement 中传递道具（不能这样做模板）。当然，YMMV，但这是我选择的路径。

const app = Vue.createApp({
  setup(props, context) {
    const refElement = Vue.ref(null)

    const testResize = () => {
      if (refElement.value !== null) {
        refElement.value.focus()
      }
    }

    return {
      testResize,
      refElement: () => refElement
    }
  }
});


app.component("text-area", {
  template: `<textarea ref="taRef"></textarea></div></div>`,
  props: {
    textarearef: {
      type: Function
    }
  },
  setup(props) {
    const taRef = props.textarearef()
    return {
      taRef
    }
  }
})

app.mount("#app");

<script src="https://unpkg.com/vue@3.0.3/dist/vue.global.prod.js"></script>

<div id="app">
  <text-area :textarearef="refElement"></text-area>
  <button @click="testResize">?</button>
</div>