vue3 + ts(typescript) ref 获取单个/多个dom元素
template<input type="text" ref="inputRef" /><!-- 加冒号传入divs方法 --><div v-for="i of 3" :key="i" :ref="divs"></div>setup// 获取单个domconst inputRef = ref<HTMLElement | null>(nul
·
template
<input type="text" ref="inputRef" />
<!-- 加冒号传入divs方法 -->
<div v-for="i of 3" :key="i" :ref="divs"></div>
setup
// 获取单个dom
const inputRef = ref<HTMLElement | null>(null);
// 获取多个dom
const arr = ref([]);
const divs = (el: HTMLElement) => {
// 断言为HTMLElement类型的数组
(arr.value as Array<HTMLElement>).push(el);
// 这样写编译器会抛出错误
// --> Argument of type 'HTMLElement' is not assignable to parameter of type 'never'.
// arr.value.push(el);
};
onMounted(() => {
// 加载完成获取input焦点
inputRef.value && inputRef.value.focus();
// 打印多个ref DOM
console.log(arr);
});
return {
inputRef,
divs,
};
更多推荐
已为社区贡献20条内容
所有评论(0)