关于javascript:vue3-tstypescript-ref-获取单个多个dom元素

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,
};

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理