V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
MinYa
V2EX  ›  问与答

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

  •  
  •   MinYa · 160 天前 · 487 次点击
    这是一个创建于 160 天前的主题,其中的信息可能已经有所发展或是发生改变。

    // 假定有两个功能块 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
        1
    Mark85  
       160 天前   ❤️ 1
    // B
    export default function useB() {
    const BRef = ref()
    const doClick = () => {
    // xxx
    }
    return {
    BRef,
    doClick,
    }
    }

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

    const {BRef, doClick} = useB()
    MinYa
        2
    MinYa  
    OP
       160 天前
    @Mark85 感谢大佬,这个方法可行,另外我还想到一个写法,直接将 dom 跟 js 一起封装在一个 vue ,这个测试也可行
    Mark85
        3
    Mark85  
       160 天前
    @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
        4
    MinYa  
    OP
       160 天前
    这个是在顶层将 ref 传递进去,应该是没问题,但是如果要封装的模块很多,感觉就会越来越混乱。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2014 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 11:48 · PVG 19:48 · LAX 04:48 · JFK 07:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.