vue.prototype如何使用-Voir.js-php.cn

vue.prototype的使用方法：通过在原型上定义使其在每个Vue的实例中可用，代码为【Vue.prototype.$appName = 'My App'】，控制台会打印出My App。

vue.prototype如何使用

本教程操作环境：windows10系统、vue2.5.2，本文适用于所有品牌的电脑。

【相关文章推荐：vue.js】

vue.prototype的使用方法：

在vue项目main.js文件中：

Vue.prototype.$appName = 'My App'

Copier après la connexion

这样你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。

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

Copier après la connexion

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

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

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

比如写成：

Vue.prototype.appName = 'My App'

Copier après la connexion

在vue实例中：

new Vue({ data: { appName: 'The name of some other app' }, beforeCreate: function () { console.log(this.appName) }, created: function () { console.log(this.appName) } })

Copier après la connexion

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