vue.prototype怎么使用

这篇文章主要介绍vue.prototype怎么使用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联公司-专业网站定制、快速模板网站建设、高性价比青龙网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式青龙网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖青龙地区。费用合理售后完善，十载实体公司更值得信赖。

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

vue.prototype的使用方法：

在vue项目main.js文件中：

Vue.prototype.$appName = 'My App'

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

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

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

“为什么 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.prototype怎么使用”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

文章名称：vue.prototype怎么使用
URL分享：http://6mz.cn/article/jpiihd.html