vue 中 Vue.prototype 详解及使用

前言:

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

1. 基本示例
  • 在main.js中添加一个变量到 Vue.prototype
js 复制代码
Vue.prototype.$appName = 'My App'
  • 这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以
js 复制代码
 beforeCreate: function () {
    console.log(this.$appName)
 }
  • 控制台会打印出 My App
2. 为实例prototype设置作用域
  • 为什么 appName 要以 $ 开头?
  • $ 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。
  • 如果我们设置:
js 复制代码
Vue.prototype.appName = 'My App'
js 复制代码
export default {
  data(){
    return{
      appName:'组件实例中的appName'
    }
  },
  beforeCreate: function () {
    console.log(this.appName)
  },
  created: function () {
    console.log(this.appName)
  },
}
</script>
  • 日志中会先出现 "My App",然后出现 "组件实例中的appName",因为 this.appName 在实例被创建之后被 data 覆写了。我们通过 $ 为实例 property 设置作用域来避免这种事情发生。
使用示例
  • 在main.js 中进行全局挂载
js 复制代码
Vue.prototype.$bus = new Vue()
  • 在vue页面中进行使用
js 复制代码
/**  发射事件,绑定事件  hidePlayVideo 一致*/
this.$bus.$emit('hidePlayVideo',true)

/** 监听创建的事件 */
this.$bus.$on("hidePlayVideo", value => {
  this.palyVideo = value
})
相关推荐
HED1 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪1 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
烛阴2 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中2 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木2 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
局外人LZ2 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
宝拉不想努力了3 小时前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
鱼樱前端3 小时前
前端必知必会:JavaScript 对象与数组克隆的 7 种姿势,从浅入深一网打尽!
前端·javascript
yzhSWJ3 小时前
Spring Boot中自定义404异常处理问题学习笔记
java·javascript
神仙别闹4 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js