当前位置 : 主页 > 大数据 > 区块链 >

Vue.prototype的用法

来源:互联网 收集:自由互联 发布时间:2021-06-22
基础事例: 在vue项目main.js文件中: Vue.prototype.$appName = ‘My App‘ 这样你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。 new Vue({ beforeCreate: function () { console.log( this .$appName)

基础事例:

在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官网 https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html

上一篇:安装 protobuf
下一篇:软件-MQ-MQ:IBM MQ
网友评论