vue 中 Vue.prototype 详解及使用

前言：

我们可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。这种情况下，可以通过在原型上定义它们使其在每个 Vue 的实例中可用。

1. 基本示例

• 在main.js中添加一个变量到 Vue.prototype

Vue.prototype.$appName = 'My App'
1

• 这样 $appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以

 beforeCreate: function () {
    console.log(this.$appName)
 }
1
2
3

• 控制台会打印出 My App

2. 为实例prototype设置作用域

• 为什么 appName 要以 $ 开头？
• $ 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。
• 如果我们设置：

Vue.prototype.appName = 'My App'
1

export default {
  data(){
    return{
      appName:'组件实例中的appName'
    }
  },
  beforeCreate: function () {
    console.log(this.appName)
  },
  created: function () {
    console.log(this.appName)
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 日志中会先出现 “My App”，然后出现 “组件实例中的appName”，因为 this.appName 在实例被创建之后被 data 覆写了。我们通过 $ 为实例 property 设置作用域来避免这种事情发生。

使用示例

• 在main.js 中进行全局挂载

Vue.prototype.$bus = new Vue()
1

• 在vue页面中进行使用

/**  发射事件，绑定事件  hidePlayVideo 一致*/
this.$bus.$emit('hidePlayVideo',true)

/** 监听创建的事件 */
this.$bus.$on("hidePlayVideo", value => {
  this.palyVideo = value
})
1
2
3
4
5
6
7