在 Vue 中设置全局 props 值答案

【问题标题】：Set global props value in Vue在 Vue 中设置全局 props 值
【发布时间】：2021-02-02 06:20:51
【问题描述】：

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

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

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

为此，我必须将app 导入每个文件，并将return 导入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';
    }
})

它会相应地更新。

【问题讨论】：

我想我仍然更喜欢使用一种更命令式的方式来定义这些，方法是使用文件来保存 ref/reactive，并在需要时执行导入。
你是什么意思？您的意思是不是单个反应性对象，而是单个反应性属性？
几乎相同的方式（使用reactive），但不是使用app.config.globalProperties，而是通过import将它注册到每个组件的繁琐。虽然使用全局对象没有错，但我发现它有一些缺点，即它更有可能促进逻辑和功能的拆分。如果您将变量和函数放在一个位置（文件）并且不将它们绑定到应用程序的内部，您可以拥有更便携和可维护的解决方案（虽然更冗长）。但是TBC，这只是个人喜好。

标签： javascript vue.js vuejs3

【解决方案1】：

看起来你已经准备好了一切。

唯一的一点是你不需要指定app，所以你不需要导入它。

这个：:styles="$tooltipStyles" 应该得到你的价值

const app = Vue.createApp({})

app.component('my-component', {
  template: '<h1 :style="$tooltipStyles">My Component {{$tooltipStyles}}</h1>',
})

app.config.globalProperties.$tooltipStyles= 'color: green;'
app.mount('#app')

<script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script>
<div id="app">
  <my-component></my-component>
</div>

【讨论】：

【解决方案2】：

你可以试试prototypes

import Vue from 'vue'

Vue.prototype.$tooltipStyles = {
   width: '300px',
   minWidth: 'unset'
}

欲了解更多信息：Adding Instance Properties

安装 Vue：

otherFile.js

mounted() {
  console.log(this.$tooltipStyles)
}

【讨论】：

这是 Vue 2 但我使用的是 Vue 3