vue3给动态渲染的组件添加ref的解决方案
前言
在开发过程中,很组件都是通过 v-for 动态渲染出来的组件,那么怎么给这些组件设置 ref 呢
一、问题示例
如下代码功能所示:
<div v-for="(e, i) in elements"> <component ref="ref" :is="e.com" /> </div> <script setup> const ref = ref(null) </script>
以上代码运行时,控制台会有一堆警告
[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes.
二、尝试解决方案
通过对象来存储ref,代码如下:
<div v-for="(e, i) in elements"> <component ref="ref[e.id]" :is="e.com" /> </div> <script setup> const ref = reactive({}) </script>
结果失败
通过对象来存储ref,代码如下:
<div v-for="(e, i) in elements"> <component ref="ref[e.id]" :is="e.com" /> </div> <script setup> const ref = reactive({}) </script>
结果失败
通过对象来存储ref,代码如下:
<div v-for="(e, i) in elements"> <component ref="ref[e.id]" :is="e.com" /> </div> <script setup> const ref = ref({}) elements.forEach(e -> ref.value[e.id] = null) </script>
结果失败
三、最终解决方案
可以试试这样写
const mTextareaRef = ref<HTMLTextAreaElement|null>(null)
ref 用在dom 上好像有固定写法,初始化时传入null,为了和普通的原始类型区分
于是我把
ref.value[e.id] = null 改成 ref.value[e.id] = ref(null)
代码如下:
<div v-for="(e, i) in elements"> <component ref="ref[e.id]" :is="e.com" /> </div> <script setup> const ref = ref({}) elements.forEach(e -> ref.value[e.id] = ref(null)) </script>
结果成功
四、vue3官网解决方案
<div v-for="item in list" :ref="setItemRef"></div>
import { onBeforeUpdate, onUpdated } from 'vue' export default { setup() { let itemRefs = [] const setItemRef = el => { if (el) { itemRefs.push(el) } } onBeforeUpdate(() => { itemRefs = [] }) onUpdated(() => { console.log(itemRefs) }) return { setItemRef } } }
总结
到此这篇关于vue3给动态渲染的组件添加ref的文章就介绍到这了,更多相关vue3动态渲染组件添加ref内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())
这篇文章主要介绍了vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-04-04详解vue数组遍历方法forEach和map的原理解析和实际应用
这篇文章主要介绍了详解vue数组遍历方法forEach和map的原理解析和实际应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论