在 Vue 中设置全局属性值

Question

我正在将一个组件库导入到我的 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';
    }
})

并相应更新。

Answer 1

你可以试试 prototypes

import Vue from 'vue'

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

更多信息：Adding Instance Properties

安装了 Vue：

otherFile.js

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

Answer 2

看起来您几乎已准备就绪。

唯一的是不需要指定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>

在 Vue 中设置全局属性值

Set global props value in Vue

javascript

vue.js

vuejs3