Javascript 在Vue中设置全局道具值

我正在将一个组件库导入我的Vue 3项目

组件的每个实例使用完全相同的样式。为了避免手动更改每个实例的道具，我使用了全局属性：

app.config.globalProperties.$tooltipStyles = { width: '300px', minWidth: 'unset' };

为此，我必须将

app

导入到每个文件中，然后

在
setup（）
中返回它。我还必须将其设置为每个实例：

:styles="app.$tooltipStyles"

是否有一种全局设置的方法，以便每次使用该组件时，默认情况下都具有这些样式


编辑

为了补充已接受的答案，我创建了一个单独的文件，该文件导出一个反应对象：

import { reactive } from 'vue';

const global = reactive({
    $tooltipStyles: { width: '300px', minWidth: 'unset' },
    $tooltipPosition: 'right',
});

export default global;

这样，我可以随时更新任何属性

例如，当屏幕小于某个大小时，我可以将位置更改为
'top'
：

window.addEventListener('resize', () => {
    if (window.matchMedia('(max-width: 992px)').matches) {
        global.$tooltipPosition = 'top';
    } else {
        global.$tooltipPosition = 'right';
    }
})

它会相应地更新。
您可以尝试使用
原型

从“Vue”导入Vue
Vue.prototype.$tooltipStyles={
宽度：“300px”，
最小宽度：“未设置”
}

有关更多信息：

安装Vue时：

otherFile.js

mounted（）{
console.log（此.tooltipStyles）
}
看起来你几乎把所有东西都准备好了

唯一的问题是，您不需要指定
应用程序
，因此不需要导入它

这：
：style=“$tooltipStyles”
应该得到您的值


const-app=Vue.createApp（{}）
应用程序组件（“我的组件”{
模板：“我的组件{{$tooltipStyles}}”，
})
app.config.globalProperties.$tooltipStyles='color:green；'
app.mount（“#app”）

这是针对Vue 2的，但我使用的是Vue 3。我想我还是更愿意使用一种更为迫切的方式来定义它们，即使用一个文件来保存ref/reactive，并根据需要进行导入。这是什么意思？你的意思是说，不是一个单一的被动对象，而是单个的被动属性吗？几乎相同的方法（使用
reactive
），但不是使用
app.config.globalProperties
，我将通过
import
将其注册到每个组件。虽然使用全局对象没有错，但我发现它有一些缺点，即它更有可能促进逻辑和功能的分离。如果您将变量和函数放在一个位置（文件），而不将它们绑定到应用程序的内部，那么您可能会有一个更可移植和可维护的解决方案（尽管更详细）。但TBC，这只是个人喜好。