vueuse中的useTemplateRefsList

在 v-for 中绑定 ref 到模板元素和组件的简写方式

Demo1

html 复制代码
<script setup lang="ts">
import { onUpdated } from 'vue'
import { useTemplateRefsList } from '@vueuse/core'

const refs = useTemplateRefsList<HTMLDivElement>()

onUpdated(() => {
  console.log(refs)
})
</script>

<template>
  <div v-for="i of 5" :key="i" :ref="refs.set" />
</template>

Demo2

html 复制代码
<script setup lang="ts">
import { useTemplateRefsList } from '@vueuse/core'
import { nextTick, ref, watch } from 'vue'

const count = ref(5)
const refs = useTemplateRefsList<HTMLDivElement>()

watch(refs, async () => {
  await nextTick()
  console.log([...refs.value])
}, {
  deep: true,
  flush: 'post',
})
</script>

<template>
  <span v-for="i of count" :key="i" :ref="refs.set" class="mr-2">
    {{ i }}
  </span>
  <br>
  <button @click="count += 1">
    Inc
  </button>
  <button :disabled="count <= 0" @click="count -= 1">
    Dec
  </button>
  <note>Open the console to see the output</note>
</template>
相关推荐
独立开阀者_FwtCoder1 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder1 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep8 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛14 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i22 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟27 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览30 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少32 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z44 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
编程猪猪侠1 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro