我創建了一個名為Input. 傳遞給該Input組件的所有屬性都被成功繼承，但ref由于某種原因，該屬性總是被省略。
驗證失敗后，我需要該ref屬性將焦點設定在元素上。
一些.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>
輸入.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 屬性，但結果是一樣的，省略了嗎？
我在這里做錯了什么..？
uj5u.com熱心網友回復：
ref是一個特殊屬性，它不應該用作道具。
可以將組件的根元素作為$refs.mobileRef.$el.focus(). 該組件還可以顯式公開所有公共方法，因此它們將用作$refs.mobileRef.focus().
uj5u.com熱心網友回復：
您可以洗掉組件中的ref道具Input.vue并在其中添加一個觀察者，以觀察一些錯誤。如果有，.focus()請在您的輸入元素上觸發 a 。
一些.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>
輸入.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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/457170.html