亲宝软件园·资讯

展开

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

qiu_cs 人气:0

前言

在开发过程中,很组件都是通过 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
    }
  }
}

总结

加载全部内容

相关教程
猜你喜欢
用户评论