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

This topic created in 1502 days ago, the information mentioned may be changed or developed.

// 假定有两个功能块 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 replies • 2022-04-26 16:43:04 +08:00

Mark85

Apr 26, 2022

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

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

const {BRef, doClick} = useB()

MinYa

Apr 26, 2022

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

Mark85

Apr 26, 2022

@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

Apr 26, 2022

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