vue.prototype 是原型, 我们可以在上面添加属性, 方法, 方便每个 vue 实例使用它.
如何访问 vue.prototype?
在每个 vue 实例中, 通过 "this." 的形式即可访问 Vue.prototype 上的属性及方法.
例如: 在 vue 项目 main.JS 文件中:
Vue.prototype.$appName = 'My App'
这样你可以通过在原型上定义它们使其在每个 Vue 的实例中可用.
- new Vue({
- beforeCreate: function () {
- console.log(this.$appName)
- }
- })
控制台会打印出 My App. 就这么简单!
- (相关课程推荐: Vue.JS 教程 https://www.html.cn/jskuangjia/vue/ )
- "为什么 appName 要以 $ 开头? 这很重要吗? 它会怎样?"
$ 是在 Vue 所有实例中都可用的属性的一个简单约定. 这样做会避免和已被定义的数据, 方法, 计算属性产生冲突.
比如写成:
Vue.prototype.appName = 'My App'
在 vue 实例中:
- 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 覆写了. 我们通过 $ 为实例属性设置作用域来避免这种事情发生. 你还可以根据你的喜好使用自己的约定, 诸如 $_appName 或 ΩappName, 来避免和插件或未来的插件相冲突.
本文来自 vue.js 答疑 https://www.html.cn/qa/vue-js/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/vue-js/15991.html