Vue - 分类 - LZWcc's Bloghttps://lzwcc.github.io/categories/vue/Vue - 分类 - LZWcc's BlogHugo -- gohugo.iozh-CNl1274645232@gmail.com (LZWcc)l1274645232@gmail.com (LZWcc)Tue, 14 Oct 2025 13:51:34 +0800Vue 3 中使用 getCurrentInstance 获取全局属性动态设置样式https://lzwcc.github.io/posts/vue-ques02/Tue, 14 Oct 2025 13:51:34 +0800LZWcchttps://lzwcc.github.io/posts/vue-ques02/在 Vue 3 的开发中，我们有时需要通过全局属性来动态设置组件的样式，例如页面的最大宽度和最小宽度。本文将结合一个实际案例，详细讲解如何使用 getCurrentInstance 获取全局属性，并通过动态绑定样式实现需求。

在 Vue 3 中，app.config.globalProperties 提供了一种方式，可以定义全局属性供所有组件访问。这些全局属性可以在组件中通过 getCurrentInstance 获取，并用于动态设置样式或其他逻辑。

以下是一个示例场景：

  • 我们需要设置页面的最大宽度和最小宽度。
  • 这些宽度值是全局定义的，方便在不同组件中复用。

首先，在 main.js 中通过 app.config.globalProperties 定义全局属性 bodyMaxWidth 和 bodyMinWidth：