vue设置全局变量

最新推荐文章于 2024-08-06 15:37:37 发布

IT-CLASS

最新推荐文章于 2024-08-06 15:37:37 发布

阅读量1.2k

点赞数 1

分类专栏： vue 前端

原文链接：https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

在Vue应用中，通过在原型上定义如Vue.prototype.$appName的方式可以设置全局变量，避免污染全局作用域。这种方式使得$appName在所有Vue实例中可用。如果直接使用appName作为原型属性，则可能与实例的data属性冲突，导致预期外的行为。使用$前缀是一种约定，用于区分实例属性和数据属性，防止命名冲突。

摘要由CSDN通过智能技术生成

如果需要设置全局变量，在main.js中，Vue实例化的代码里添加。

来自vue官网 https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html
不想污染全局作用域。这种情况下，你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。

Vue.prototype.$appName = 'My App'

这样 $appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以。如果我们运行：

new Vue({
  beforeCreate: function () {
    console.log(this.$appName)
  }
})

则控制台会打印出 My App。就这么简单！

你可能会好奇：

“为什么 appName 要以 $ 开头？这很重要吗？它会怎样？”

这里没有什么魔法。$ 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。

“你指的冲突是什么意思？”

另一个好问题！如果你写成：

Vue.prototype.appName = 'My App'

那么你希望下面的代码输出什么呢？

new Vue({
  data: {
    // 啊哦，`appName` *也*是一个我们定义的实例属性名！?
    appName: 'The name of some other app'
  },
  beforeCreate: function () {
    console.log(this.appName)
  },
  created: function () {
    console.log(this.appName)
  }
})

日志中会先出现 “My App”，然后出现 “The name of some other app”，因为 this.appName 在实例被创建之后被 data 覆写了。我们通过 $ 为实例属性设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定，诸如 $_appName 或 ΩappName，来避免和插件或未来的插件相冲突。