时间戳

首页 > 解决方案 > Vue 3 - 如何重命名通过 toRefs() 公开的保留关键字？

javascript - Vue 3 - 如何重命名通过 toRefs() 公开的保留关键字？

问题描述

使用 Vue 3 的 Composition API，是否可以在使用时重命名保留关键字toRefs()？

[vue/no-parsing-error] 解析错误：关键字 'package' 被保留。

setup(){
    const data = reactive<Foo>({
        ...
        package: {
            ...
        }
    })
    return { ...toRefs(data) }
}

<template>
    {{ package.bar }}
</template>

标签： javascripttypescriptvue.jsvuejs3vue-composition-api

解决方案

Linter 错误专门指{{ package.bar }}而不是直接指向对象键，这是允许的。这toRefs无关紧要，因为它已经是普通对象，具有讨论中的属性并且本身不是反应性的：

{ ...toRefs(data) }

可以以 JavaScript 中可用的任何方式为对象属性分配不同的名称，例如使用浅拷贝：

const { package: packageItem, ...dataRefs } = toRefs(data);
return { packageItem, ...dataRefs };

推荐阅读