vue 中 Vue.prototype 详解及使用

前言:

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

1. 基本示例
  • 在main.js中添加一个变量到 Vue.prototype
Vue.prototype.$appName = 'My App'
  • 这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以
 beforeCreate: function () {console.log(this.$appName)}
  • 控制台会打印出 My App
2. 为实例prototype设置作用域
  • 为什么 appName 要以 $ 开头?
  • $ 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。
  • 如果我们设置:
Vue.prototype.appName = 'My App'
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 中进行全局挂载
Vue.prototype.$bus = new Vue()
  • 在vue页面中进行使用
/**  发射事件,绑定事件  hidePlayVideo 一致*/
this.$bus.$emit('hidePlayVideo',true)/** 监听创建的事件 */
this.$bus.$on("hidePlayVideo", value => {this.palyVideo = value
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/707743.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于JAVA的就医保险管理系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 科室档案模块2.2 医生档案模块2.3 预约挂号模块2.4 我的挂号模块 三、系统展示四、核心代码4.1 用户查询全部医生4.2 新增医生4.3 查询科室4.4 新增号源4.5 预约号源 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVue…

大数据相关知识

Hadoop三大组件 HDFS -- Hadoop Distributed File System Hadoop的分布式文件系统 主要负责数据的存储和管理&#xff0c;可以将大数据集分成多个数据块&#xff0c;并将这些数据块分配到不同的计算节点上存储&#xff0c;提高数据的可靠性和处理效率 MapReduce 是Hadoop的…

内部控制提纲

当然&#xff0c;以下是一个更详细的关于内部控制的论文提纲&#xff1a; 一、引言 1.1 内部控制的定义与重要性 解释内部控制的基本概念和它在企业管理中的作用阐述内部控制对企业风险管理和运营效率的影响 1.2 内部控制的目标与原则 列出内部控制的主要目标&#xff0c;…

使用TensorRT在PyTorch项目中加速深度学习推理

在PyTorch项目中使用TensorRT进行深度学习推理通常涉及以下步骤&#xff1a; 模型训练&#xff1a;首先&#xff0c;在PyTorch中训练你的深度学习模型。 模型导出&#xff1a;训练完成后&#xff0c;将模型从PyTorch导出为ONNX&#xff08;Open Neural Network Exchange&#…

在独立Unity工程中集成Vortex Studio

本文首发于&#xff1a;Unity3D入门教程09.01&#xff1a;在独立Unity工程中集成Vortex Studio 目的 在Unity中使用Vortex Studio引擎模拟Unity场景中的任何资源。 工程 打开桌面Unity Hub快捷方式 点击Open选择需要打开的工程&#xff0c;这里选择官方提供的默认工程C:\CM…

如何实现双向循环链表

博主主页&#xff1a;17_Kevin-CSDN博客 收录专栏&#xff1a;《数据结构》 引言 双向带头循环链表是一种常见的数据结构&#xff0c;它具有双向遍历的特性&#xff0c;并且在表头和表尾之间形成一个循环。本文将深入探讨双向带头循环链表的结构、操作和应用场景&#xff0c;帮…

【医学影像】LIDC-IDRI数据集的无痛制作

LIDC-IDRI数据集制作 0.下载0.0 链接汇总0.1 步骤 1.合成CT图reference 0.下载 0.0 链接汇总 LIDC-IDRI官方网址&#xff1a;https://www.cancerimagingarchive.net/nbia-search/?CollectionCriteriaLIDC-IDRINBIA Data Retriever 下载链接&#xff1a;https://wiki.canceri…

[java] 23种设计模式之代理模式

代理&#xff08;Proxy&#xff09;模式&#xff1a;为某对象提供一种代理以控制对该对象的访问。即客户端通过代理间接地访问该对象&#xff0c;从而限制、增强或修改该对象的一些特性。比如我们在租房子的时候会去找中介&#xff0c;为什么呢&#xff1f;因为你对该地区房屋的…

Golang使用Swag搭建api文档

1. 简介 Gin是Golang目前最为常用的Web框架之一。 公司项目验收需要API接口设计说明书&#xff08;Golang后端服务基于Gin框架编写&#xff09;&#xff0c;编写任务自然就落到了我们研发人员身上。 项目经理提供了文档模板&#xff0c;让我们参考模板来手动编写&#xff0c;要…

如何怎麼搭建高效的爬蟲全球代理IP池?

爬蟲技術可以幫助我們從各類網站上獲取大量的數據資訊&#xff0c;但常常會遇到IP被封鎖的問題&#xff0c;這就是我們需要搭建全球代理IP池的原因。那麼&#xff0c;如何搭建一個高效的IP代理池呢&#xff1f; IP代理池指什麼&#xff1f; 首先&#xff0c;我們需要明白什麼是…

5.WEB渗透测试-前置基础知识-常用的dos命令

内容参考于&#xff1a; 易锦网校会员专享课 上一篇内容&#xff1a;4.WEB渗透测试-前置基础知识-快速搭建渗透环境&#xff08;下&#xff09;-CSDN博客 常用的100个CMD指令 1.gpedit.msc—–组策略 2. sndrec32——-录音机 3. Nslookup——-IP地址侦测器 &#xff0c;是一个…

Unity中的UI系统之GUI

目录 概述工作原理和主要作用基础控件重要参数及文本和按钮多选框和单选框输入框和拖动条图片绘制和框 复合控件工具栏和选择网络滚动视图和分组窗口 自定义整体样式自定义皮肤样式 概述 什么是UI系统 UI是User Interface&#xff08;用户界面&#xff09;的简称&#xff0c;用…

全域增长方法论:帮助品牌实现科学经营,助力长效生意增长

前两年由于疫情反复、供给需求收缩等条件制约&#xff0c;品牌业务均受到不同程度的影响。以双十一和618电商大促为例&#xff0c;就相比往年颇显“惨淡”&#xff0c;大多品牌营销都无法达到理想预期。 随着市场环境不断开放&#xff0c;2023年营销行业开始从低迷期走上了高速…

MySQL创建数据库和创建数据表

MySQL 是最常用的数据库&#xff0c;在数据库操作中&#xff0c;基本都是增删改查操作&#xff0c;简称CRUD。 在这之前&#xff0c;需要先安装好 MySQL &#xff0c;然后创建好数据库、数据表、操作用户。 一、创建数据库语法格式 我们可以在登陆 MySQL 服务后&#xff0c;…

SDWAN异地组网难在哪?怎么解决?

SD-WAN作为一种先进的网络技术&#xff0c;为企业提供了更加灵活和高效的网络连接方案。然而&#xff0c;在异地组网的过程中&#xff0c;SD-WAN也面临一些挑战。本文将探讨SD-WAN异地组网所面临的难题&#xff0c;并提供相应的解决方案。 挑战一&#xff1a;网络延迟和不稳定性…

Jupyter Notebook 下载+简单设置

这里写目录标题 1. Jupyter Notebook安装2.切换打开别的盘3. 创建代码文件4.为jupyter notebook添加目录 (Jupyter安装拓展nbextensions)step1&#xff1a;安装命令step2&#xff1a;用户配置step3&#xff1a;上述过程均完成后&#xff0c;打开jupyter notebook就会发现界面多…

常见的socket函数封装和多进程和多线程实现服务器并发

常见的socket函数封装和多进程和多线程实现服务器并发 1.常见的socket函数封装2.多进程和多线程实现服务器的并发2.1多进程服务器2.2多线程服务器2.3运行效果 1.常见的socket函数封装 accept函数或者read函数是阻塞函数&#xff0c;会被信号打断&#xff0c;我们不能让它停止&a…

什么是服务级别协议(SLA)?

在数字化时代&#xff0c;企业和服务提供商之间的关系变得越来越复杂&#xff0c;而服务级别协议&#xff08;SLA&#xff09;则在这个复杂网络中发挥着至关重要的作用。本文将深入介绍SLA&#xff0c;从它的定义、应用场景到监测方法&#xff0c;全方位解析这一法律桥梁如何确…

哪里申请EV代码签名证书?

EV代码签名证书是一种高级别的数字证书&#xff0c;它通过严格的验证流程&#xff0c;确保软件发布者身份的真实性和可信度。相较于普通代码签名证书&#xff0c;EV证书采用了更严格的验证标准&#xff0c;包括对企业身份、法律地位、组织结构多个方面的核实。这使得EV证书成为…

【Docker】【Nacos】单机部署

【Docker】【Nacos】单机部署 背景介绍环境步骤总结背景 因国内访问 Docker Hub 极不稳定,因此总结整理出本文,以便后续需要时方便查看。 介绍 本文介绍Docker安装Nacos并实现单机模式部署的方法及步骤。 环境 分类名称版本操作系统WindowsWindows 11DockerDocker Engine…