Vue.js: 子组件省略了 `ref` 属性

Question

我创建了一个名为 Input 的组件。传递给这个 Input 组件的所有属性都被成功继承，但是 ref 属性由于某种原因总是被省略。

验证失败后，我需要 ref 属性来将焦点设置在元素上。

Some.vue

<template>
    ...

    <Input
        type="number"
        name="mobile"
        ref="mobileRef"
        v-model="this.form.mobile"
        :class="errors.mobile ? 'error' : null"
        :error="errors.mobile ?? null"
    />

    ...
</template>

<script>
import Input from '@Inputs/Input';

export default {
    ...

    components: {
        Input,
    },

    ...
}
</script>

Input.vue

<template>
    <input
        autocomplete="none"
        class="form-control"
        :ref="ref"
        :class="this.class"
        :type="this.type ?? 'text'"
        :value="modelValue"
        :disabled="disabled"
        @input="$emit('update:modelValue', $event.target.value)"
     />
</template>

<script>
export default {
    name: 'Input',
    inheritAttrs: false,
    props: ['type', 'class', 'error', 'modelValue', 'disabled', 'ref']
}
</script>

我什至用一些静态值硬编码了 ref 属性，但结果是一样的，省略了吗？
我哪里做错了..?

Answer 1

您可以删除 Input.vue 组件中的 ref 属性并在其中添加一个观察器，以观察一些错误。如果有，请在您的输入元素上触发 .focus()。

Some.vue

<template>
    ...

    <Input
        type="number"
        name="mobile"
        v-model="this.form.mobile"
        :class="errors.mobile ? 'error' : null"
        :error="errors.mobile ?? null"
    />

    ...
</template>

<script>
import Input from '@Inputs/Input';

export default {
    ...

    components: {
        Input,
    },

    ...
}
</script>

Input.vue

<template>
    <input
        autocomplete="none"
        class="form-control"
        ref="mobileRef"
        :class="this.class"
        :type="this.type ?? 'text'"
        :value="modelValue"
        :disabled="disabled"
        @input="$emit('update:modelValue', $event.target.value)"
     />
</template>

<script>
export default {
    name: 'Input',
    inheritAttrs: false,
    props: ['type', 'class', 'error', 'modelValue', 'disabled'],
    watch: {
      error(val) {
        if (val)
          this.$refs.mobileRef.focus();
      },
    },
}
</script>

Answer 2

ref 是 special attribute，它不应该用作道具。

可以通过 $refs.mobileRef.$el.focus() 访问组件的根元素。该组件还可以显式公开所有 public 方法，因此它们将用作 $refs.mobileRef.focus().

Vue.js: 子组件省略了 `ref` 属性

Vue.js: Child component omits the `ref` attribute

inheritance

attributes

vue.js