vue3给动态渲染的组件添加ref的解决方案

 更新时间:2022年11月16日 15:40:39   作者:qiu_cs  
ref和reactive一样,也是用来实现响应式数据的方法,下面这篇文章主要给大家介绍了关于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官网解决方案

v-for 中的 Ref 数组方案

<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使用Vuex状态管理模式

    vue使用Vuex状态管理模式

    这篇文章介绍了vue使用Vuex状态管理模式的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • Vue响应式系统的原理详解

    Vue响应式系统的原理详解

    这篇文章主要为大家介绍了Vue响应式系统的原理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • 解决Vue开发中对话框被遮罩层挡住的问题

    解决Vue开发中对话框被遮罩层挡住的问题

    在Vue的开发中,一旦我们用到对话框,经常出现的问题是对话框被遮罩层挡住,怎么来解决这个问题呢?下面小编给大家带来了Vue开发中对话框被遮罩层挡住的问题及解决方法,一起看看吧
    2018-11-11
  • element中table操作按钮展示与折叠的实现示例

    element中table操作按钮展示与折叠的实现示例

    因为随着功能的增多,table操作栏中的功能按钮增多,这时候就需要折叠,本文主要介绍了element中table操作按钮展示与折叠的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2022-04-04
  • vue+uniapp瀑布流布局多种实现方式示例代码

    vue+uniapp瀑布流布局多种实现方式示例代码

    由于使用uniapp开发的微信小程序不需要考虑响应式,因此瀑布流的实现相对于pc端更为简单,下面这篇文章主要给大家介绍了关于vue+uniapp瀑布流布局多种实现方式的相关资料,需要的朋友可以参考下
    2023-03-03
  • 详解vue-router数据加载与缓存使用总结

    详解vue-router数据加载与缓存使用总结

    这篇文章主要介绍了详解vue-router数据加载与缓存使用总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    这篇文章主要介绍了vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 解决ele ui 表格表头太长问题的实现

    解决ele ui 表格表头太长问题的实现

    这篇文章主要介绍了解决ele ui 表格表头太长问题的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue如何判断数组中的对象是否包含某个值

    vue如何判断数组中的对象是否包含某个值

    这篇文章主要介绍了vue如何判断数组中的对象是否包含某个值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 详解vue数组遍历方法forEach和map的原理解析和实际应用

    详解vue数组遍历方法forEach和map的原理解析和实际应用

    这篇文章主要介绍了详解vue数组遍历方法forEach和map的原理解析和实际应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论