Vue.prototype详解

一:简介

        在 Vue.js 中,经常会看到  this.$XXX  这种写法,那么这个是什么呢?其实这里就是使用 Vue.prototype 所定义的一个挂载到本身的全局方法,主要是为了防止全局变量的污染,所以我们来共同商议的一种写法。

        Vue.prototype 可以用来添加一些全局的属性或方法,使其在每个 Vue 实例中都可用。Vue.prototype 可以添加任何类型的属性或方法,比如:常量、对象、方法等。

 它是就是解决 替换全局使用的一个标识。

添加全局属性:

        添加全局属性可以方便我们在项目中使用。例如在项目中我们需要获取当前时间戳,我们可以在 main.js 中添加如下代码:

Vue.prototype.$getTimestamp = function () {return new Date().getTime()
}

        上面的代码定义了一个名为 $getTimestamp 的全局方法,可以在整个项目中使用。在组件中使用该全局方法,只需在组件中使用 this.$getTimestamp 即可。

添加全局方法

        添加全局方法也是同样的道理,在 main.js 文件中添加如下代码:

Vue.prototype.$sayHello = function (name) {console.log(`Hello, ${name}!`)
}

        上面的代码定义了一个名为 $sayHello 的全局方法,它接收一个参数 name,可以在整个项目中使用。在组件中使用该方法,只需在组件中使用 this.$sayHello("John"),就可以打印出 "Hello, John!" 了。

二:示例

        下面我们通过两个示例说明 Vue.prototype 的使用。

示例一

        在项目中经常会用到 Vue 的生命周期函数,如 created()、mounted() 等。如果每个组件都想要执行特定的逻辑,就需要在每个组件中的对应生命周期函数中实现,代码会显得非常冗余。这时可以考虑将该逻辑封装到共享的函数中,在 Vue.prototype 中定义该函数。

// 定义全局函数
Vue.prototype.$log = function (msg) {console.log(`[${new Date().toLocaleString()}]: ${msg}`)
}// 使用全局函数
export default {created() {this.$log("组件创建成功!")},mounted() {this.$log("组件挂载成功!")}
}

        上面的代码中,我们在 Vue.prototype 中定义了一个名为 $log 的全局函数,用于记录每个组件的生命周期,然后在组件的 created()、mounted() 生命周期中分别调用 $log() 函数。

示例二

        在 Vue.js 中,我们可以通过 $http 或 axios 等第三方库来进行网络请求。为了方便,我们可以将其包装成插件形式,通过 Vue.use() 来引入。

// 封装插件
import axios from "axios"const myPlugin = {install(Vue) {Vue.prototype.$http = axios}
}// 使用插件
Vue.use(myPlugin)// 在组件中使用 $http
export default {mounted() {this.$http.get("/api/users").then(response => console.log(response)).catch(error => console.log(error))}
}

        上面的代码中,我们把 axios 封装成一个插件,并将其添加到 Vue.prototype 中,使其在每个 Vue 实例中都可用。在组件中使用 $http,只需像普通的函数一样调用,不需再引入和初始化 axios。

三:为什么“$”开头?

        $ 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。其实可以是任意字符,比如“#”,“¥”等都可以。

错误示例:

        如果代码书写如下,其全局和局部定义了同一个变量名:

Vue.prototype.appName = 'My App'
new Vue({data: {// 啊哦,`appName` *也*是一个我们定义的实例属性名!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 有这种使用的情况下,那么建议使用 require/import 来替换就好了(大型项目使用它就比较好维护)。

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

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

相关文章

软件项目管理实践指南:有效规划、执行和控制

软件项目管理是使软件产品、应用程序和系统成功交付的重要规程。它有助于确保软件在预算内按时开发,同时满足客户的质量和功能需求。 软件项目管理是管理软件项目生命周期的一种有组织的方法,包括计划、开发、发布、维护和支持。它是在满足客户需求的同时…

RocketMQ为什么要保证订阅关系一致

这篇文章,笔者想聊聊 RocketMQ 最佳实践之一:保证订阅关系一致。 订阅关系一致指的是同一个消费者 Group ID 下所有 Consumer 实例所订阅的 Topic 、Tag 必须完全一致。 如果订阅关系不一致,消息消费的逻辑就会混乱,甚至导致消息丢…

EMNLP 2023 录用论文公布,速看NLP各领域最新SOTA方案

EMNLP 2023 近日公布了录用论文。 开始前以防有同学不了解这个会议,先简单介绍介绍:EMNLP 是NLP 四大顶会之一,ACL大家应该都很熟吧,EMNLP就是由 ACL 下属的SIGDAT小组主办的NLP领域顶级国际会议,一年举办一次。相较于…

【Vue3 Antdv】Ant Design Vue文字溢出鼠标滑上显示tooltip。不溢出,鼠标滑上不显示tooltip

组件封装代码 <template><a-tooltip mouseenter"showToolTip" v-bind"getBindValue"><template #title>{{ props.title }}</template><slot><span>{{ props.title }}</span></slot></a-tooltip> &…

DB2 HADR 配置 centos 7配置 DB2 HADR 版本 11.1,【亲测可用】全网最细

DB2 HADR 配置 centos 7配置 DB2 HADR 版本 11.1&#xff0c;【亲测可用】全网最细的男人 操作系统 linux centos7 DB2版本 11.1 主库 192.168.46.70 备库 192.168.46.71 参考文章&#xff1a;一步一个脚印 DB2 10.5 HADR 主备库配置 前置条件 机器之间时间必须同步&#xff0…

C++11新特性(lambda,可变参数模板,包装器,bind)

lambda表达式是什么&#xff1f;包装器又是什么&#xff1f;有什么作用&#xff1f;莫急&#xff0c;此篇文章将详细带你探讨它们的作用。很多同学在学习时害怕这些东西&#xff0c;其实都是方便使用的工具&#xff0c;很多情况下我们学这些新的东西觉得麻烦&#xff0c;累赘&a…

uni-app开发微信小程序的报错[渲染层错误]排查及解决

一、报错信息 [渲染层错误] Framework nner error (expect FLOW INITIALCREATION end but get FLOW CREATE-NODE) 二、原因分析及解决方案 第一种 原因&#xff1a;基础库版本的原因导致的。 解决&#xff1a; 1.修改调试基础库版本 2.详情—>本地设置—>调试基础库…

扎根嵌入式行业需要什么学历文凭?

在嵌入式行业&#xff0c;学历并不是唯一关键。我本人拥有电子工程学士学位&#xff0c;但嵌入式行业更看重实际技能和经验。视频后方有免费的嵌入式学习资料&#xff0c;入门和进阶内容都涵盖其中。嵌入式行业一般接纳各种学历&#xff0c;从专科到本科到研究生&#xff0c;甚…

CentOS 安装MySQL 详细教程

参考:https://www.cnblogs.com/dotnetcrazy/p/10871352.html 参考:https://www.cnblogs.com/qiujz/p/13390811.html 参考:https://blog.csdn.net/darry1990/article/details/130419433 一、安装 一、进入安装目录 将账户切换到root账户下&#xff0c;进入local目录下 cd /usr…

通过商品ID获取淘宝天猫商品评论数据,淘宝商品评论接口,淘宝商品评论api接口

淘宝商品评论内容数据接口可以通过以下步骤获取&#xff1a; 登录淘宝开放平台&#xff0c;进入API管理控制台。在API管理控制台中创建一个应用&#xff0c;获取到应用的App Key和Secret Key。构造请求URL&#xff0c;请求URL由App Key和Secret Key拼接而成&#xff0c;请求UR…

【每日一题】ABC311G - One More Grid Task | 单调栈 | 简单

题目内容 原题链接 给定一个 n n n 行 m m m 列的矩阵&#xff0c;问权值最大的子矩阵的权值是多少。 对于一个矩阵&#xff0c;其权值定义为矩阵中的最小值 m i n v minv minv 乘上矩阵中所有元素的和。 数据范围 1 ≤ n , m ≤ 300 1\leq n,m \leq 300 1≤n,m≤300 1 ≤…

用Python和开源NLP工具库开发一个小型聊天机器人原型

为了创建一个小型聊天机器人原型&#xff0c;我们可以使用Python和开源NLP工具库spaCy。在本示例中&#xff0c;我们将演示如何创建一个简单的问答聊天机器人&#xff0c;它可以回答一些基本问题。 首先&#xff0c;确保您已经安装了Python和spaCy&#xff0c;然后下载spaCy的…

VUE3页面截取部署后的二级目录地址

用vue3开发了一个项目&#xff0c;只能部署在根目录&#xff0c;不能加二级目录&#xff0c;后来网上找了解决方案&#xff0c;在vite.config.ts中增加base: ./,配置解决问题&#xff0c;参考下图&#xff1a; 但部署后要获取部署的二级目录地址切遇到问题&#xff0c;后来想了…

数字化教育的未来:数字孪生技术助力校园创新

随着科技的飞速发展&#xff0c;智慧校园成为教育领域的新宠。数字孪生技术&#xff0c;作为一项新兴技术&#xff0c;正日益深刻地影响着校园的运营和管理。它为学校提供了前所未有的工具和资源&#xff0c;使校园管理更加高效、智能化。本文将探讨数字孪生技术如何助力智慧校…

深度学习中的激活函数

给定一个线性变换可以把x的值映射到一条直线上&#xff0c;如下图 输出结果就是y1w1xb1 如果y1经过一个线性变换得到一个y2&#xff0c;那么x和y2的关系是什么&#xff1f; 答案&#xff0c;毫无疑问是一条直线&#xff0c;不管如何的线性变换&#xff0c;依旧是一个线性的问…

【网路安全 --- Linux,window常用命令】网络安全领域,Linux和Windows常用命令,记住这些就够了,收藏起来学习吧!!

一&#xff0c;Linux 1-1 重要文件目录 1-1-1 系统运行级别 /etc/inittab 1-1-2 开机启动配置文件 /etc/rc.local /etc/rc.d/rc[0~6].d## 当我们需要开机启动自己的脚本时&#xff0c;只需要将可执行脚本丢在 /etc/init.d 目录下&#xff0c;然后在 /etc/rc.d/rc*.d 中建…

2022年最新Python大数据之Python基础【五】(字典)

文章目录 9、字典的定义10、字典的增加11、字典的删除12、字典的修改13、字典的查询14、字典的遍历 9、字典的定义 格式&#xff1a;变量 {key1 : value1, key2: value2…}空字典定义&#xff1a; {}dict&#xff08;&#xff09; 字典中键不能重复&#xff0c;是唯一的&…

Mysql的安装配置教程(详细)

MySQL是一种流行的关系型数据库管理系统&#xff0c;用于存储和管理数据。下面是MySQL的安装和配置教程的详细步骤&#xff1a; 下载MySQL安装程序&#xff1a; 访问MySQL官方网站&#xff08;https://dev.mysql.com/downloads/mysql/&#xff09;。选择适合你操作系统的版本&a…

分享关于msvcp110dll丢失的5种不同解决方法

今天我要和大家分享的主题是&#xff1a;msvcp110dll丢失的5种不同解决方法。我们都知道&#xff0c;在电脑使用过程中&#xff0c;经常会遇到一些棘手的问题&#xff0c;比如msvcp110.dll丢失。那么&#xff0c;这个文件丢失到底是什么意思呢&#xff1f;接下来&#xff0c;我…

CentOS 7下JumpServer安装及配置(超详细版)

前言 Jumpserver是一种用于访问和管理远程设备的Web应用程序&#xff0c;通常用于对服务器进行安全访问。它基于SSH协议&#xff0c;提供了一个安全和可管理的环境来管理SSH访问。Jumpserver是基于Python开发的一款开源工具&#xff0c;其提供了强大的访问控制功能&#xff0c;…