VUE3 - 在自定义组件中选择 mounted() 或 created() 上的元素，而不使用 "event"

Question

我有一个自定义输入组件，我想在不点击的情况下选择它，所以我不能使用"事件"；，我想在created((或mounted((上选择它

我该怎么做？

<template>

<div class="form-control">
<label :for="id">
{{ label }}
</label>
<input
:id="id"
:type="mode"
:value="currentValue"
@input="$emit('update:modelValue', $event.target.value)"
@focus="pullLabel"
@blur="pushLabel"
/>
</div>
</template>

<script>
export default {       

created() {
this.test();
},     


methods: {

test() {
console.log(this); // -> How could this be like '<input id="title" type="text">'
},
},
};
</script>

Answer 1

经过6个小时的工作，我自己想明白了。

答案是$refs

我发送了一个"；ref"；来自这样的父组件：

<form ref="settingsForm" @submit.prevent="updateConfig">

然后在methods中，我选择了如下形式的所有输入：(除了提交输入(

methods: {
...
focusInput() {
const inputs = this.$refs.settingsForm.querySelectorAll(
'input:not([type="submit"])'
); // $refs.settingsForm -> comes from the parent element, you can name "settingsForm" whatever you want
Array.from(inputs).map((e) => {
if (e.value.length > 0) {
e.previousElementSibling.classList.add("clicked-input");
}
});
},

...  
}

顺便说一句，最重要的是，你必须在mounted()方法上调用函数，而不是在created()上