Vue:通过Vue.prototype定义原型属性实现全局变量
如果需要设置全局变量,但不想污染全局作用域。这种情况下,可以通过在main.js中,Vue实例化的代码里通过全局变量,使其在每个 Vue 的实例中可用。Vue.prototype.$appName = 'My App'这样 $ appName 就在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以。如果我们运行下述代码,则控制台会打印出 My App。new Vue({beforeCreat
·
如果需要设置全局变量,但不想污染全局作用域。这种情况下,可以通过在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 覆写了。我们通过 $ 为实例属性设置作用域来避免这种事情发生。
更多推荐
已为社区贡献5条内容
所有评论(0)