vue3 composition API 如何优雅的获取到嵌套组件的refs?

  • Z时代
  • 2024-02-06
  • 分类：IT

最近在学习vue3.X 找到一个以前2.x的项目自己改成3.x的编写方式
现在遇到一个问题 希望大佬们帮忙解惑

首页结构大概是这样的

home

<tabs v-for="v in arr">
    <hot-product :list="v.content">
    </hot-product>
</tabs>

这里tabs的切换会触发一个hotProduct下cell组件的方法

hot-product

<div v-for="item in list">
    <cell>
</div>

cell组件上有个function 需要拿到ref调用
以前2.x的写法是在mixin里去拿ref
然后首页注册minxins 调用 这样 不同页面的页面只要是这样的逻辑都可复用

现在3.x以后 ref的写法变成

hot-product

<cell :ref="el => getCurRefs(`${refName}-${index}`,el)"></cell>
<scrpit setup>
const refArr = reactive([])
const getCurRefs = (key,dom) => {
  refArr[key] = dom
}
</scrpit>

这样这个dom就只能在hot-product中才能使用 我试过把refArr提取出去 但是状态不是共享的

官网上有共享状态的说明

用响应式 API 做简单状态管理#
如果你有一部分状态需要在多个组件实例间共享，你可以使用 reactive() 来创建一个响应式对象，并将它导入到多个组件中：
// store.js
import { reactive } from 'vue'
export const store = reactive({
  count: 0
})

这不是我想要的效果.. 我想要的就类似mixin一样 对引入的页面来说 状态是共享的 而不是任何引入的页面都共享一个状态
大概率是姿势错误 希望大佬们解惑

回答：

defineExpose，把refArrexpose出去，这样Home页面就能通过hot-product拿到了

以上是 vue3 composition API 如何优雅的获取到嵌套组件的refs? 的全部内容， 来源链接： utcz.com/p/932768.html

回到顶部