Vue如何通过Vue.prototype定义原型属性实现全局变量
更新时间：2024年10月11日 08:46:29 作者：王小二(海阔天空)
在Vue.js开发中,通过原型属性为Vue实例添加全局变量是一种常见做法,使用$前缀命名,可以避免与组件内部的数据、方法或计算属性产生命名冲突,这种方式简单有效,确保了变量在所有Vue实例中的可用性,同时保持全局作用域的整洁
Vue通过Vue.prototype定义原型属性实现全局变量
如果需要设置全局变量，但不想污染全局作用域。
这种情况下
可以通过在main.js中，Vue实例化的代码里通过添加了原型属性实现全局变量，使其在每个 Vue 的实例中可用。
Vue.prototype.$appName = 'My App'
这样 $ appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以。
如果我们运行下述代码
则控制台会打印出 My App。
new Vue({
beforeCreate: function () {
console.log(this.$appName)
}
})- 提问：上述代码中，为什么 appName 要以 $ 开头呢？
- 回答：$ 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。
假如我们在main.js中通过如下方式定义原型属性
运行下述代码，则控制台会打印什么呢？
Vue.prototype.appName = 'My App'
new Vue({
data: {
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 覆写了
我们通过 $ 为实例属性设置作用域来避免这种事情发生。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue.js 中的实用工具方法，本文是小编日常开发中常用的一些工具方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
有很多关于vue的todolist小程序，这篇文章主要介绍了 用vue写todolist单页应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了vue实现兄弟组件之间跳转指定tab标签页，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了vue3的沙箱机制的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
Vue3+Element Plus实现动态标签页以及右键菜单功能
这篇文章主要给大家介绍了关于Vue3+Element Plus实现动态标签页以及右键菜单功能的相关资料,Vue 3和Element Plus提供了一种简单的方法来实现侧边菜单栏与标签页之间的联动,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-09-09
这篇文章主要为大家介绍了VueRouter原理解读之初始化流程实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
Vue.js是一款流行的前端JavaScript框架,它提供了多种方式来实现路由跳转,下面这篇文章主要给大家介绍了关于Vue实现路由跳转的3种方式,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue draggable组件实现拖拽及点击无效问题的解决,只需要在设置handle属性就可以了，.defaultTypeTag 是要拖拽的块的类名，要注意的是需要做点击事件的项不能包含在这个类名里面，不然会无法触发点击事件，详细解决办法跟随小编一起学习吧2022-05-05
这篇文章主要介绍了vue单个元素绑定多个事件问题(例如点击绑定多个事件方法)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vue.js自定义指令的基本使用详情,文章围绕主题展开详细的内容介绍，具有一定的参考价值需要的小伙伴可以参考一下2022-05-05
最新评论