求问一个 vue3 setup 封装抽离 js 导致 ref.value 为 undefined 的问题。

MinYa 2022-04-26 16:06:44 +08:00 1418 次点击

这是一个创建于 1331 天前的主题，其中的信息可能已经有所发展或是发生改变。

// 假定有两个功能块 A 和 B,未封装前代码

<template> <div ref="BRef"></div> </template> <script setup lang="ts"> // A 功能区代码 // B 功能区代码 const BRef = ref(); const doClick = () => { //可以正常获取 console.log(BRef.value); } </script>

//封装抽离功能块

<template> <div ref="BRef"></div> </template> <script setup lang="ts"> // A 功能区代码 import { A 相关 } from './A' import { BRef, doClick } from './B'

//B 功能区 js 代码 const BRef = ref(); const doClick = () => { //此处找不到，为 undefined console.log(BRef.value); } export { BRef, doClick }

现在改造必须在最外层重新赋值一下，才能获取，有没有更优雅的写法

<template> <div ref="BRefCopy"></div> </template> <script setup lang="ts"> // A 功能区代码 import { A 相关 } from './A' import { BRef, doClick } from './B' const BRefCopy = BRef;

4 条回复 2022-04-26 16:43:04 +08:00

Mark85

2022-04-26 16:27:48 +08:00

// B
export default function useB() {
const BRef = ref()
const doClick = () => {
// xxx
}
return {
BRef,
doClick,
}
}

// 使用
import useB from './B'

const {BRef, doClick} = useB()

MinYa

2022-04-26 16:40:09 +08:00

@Mark85 感谢大佬，这个方法可行，另外我还想到一个写法，直接将 dom 跟 js 一起封装在一个 vue ，这个测试也可行

Mark85

2022-04-26 16:40:35 +08:00

@Mark85 #1

```
// B
export default function useB(BRef) {
const doClick = () => {
// BRef
}
return {
doClick,
}
}

// 使用
import useB from './B'

const BRef = ref()
const {doClick} = useB(BRef)
```

MinYa

2022-04-26 16:43:04 +08:00

这个是在顶层将 ref 传递进去，应该是没问题，但是如果要封装的模块很多，感觉就会越来越混乱。