Vue3 全局实例上挂载属性方法案例讲解
作者:旧梦星轨 发布时间:2023-07-02 16:46:14
导语
在大多数开发需求中,我们有时需要将某个数据,或者某个函数方法,挂载到,全局实例身上,以便于,在项目全局的任何位置都能够调用其方法,或读取其数据。
在Vue2 中,我们是在 main.js 中 直接将数据或者方法绑定在 Vue.prototype
身上,在页面中,可以直接通过 this.事件名或数据名
就能够拿到数据。
let art = () => {
alert("事件方法")
}
import Vue from 'vue'
Vue.prototype.$art = art
页面中 通过 this 拿取到数据方法。
mounted() {
this.$art()
}
如今在 Vue3
中,结合了组合式 Api ,在 setup 函数中,我们无法获取到 this,所以这样的需求实现,就得到了变更。 Vue3 提供了一个新的 Api globalProperties
,用来实现这样的需求。
案例中,在 main.js 中定义好一个回调函数的方法。
import { createApp } from 'vue';
import App from './App.vue'
const app = createApp(App)
let art = () => {
alert("事件方法")
}
app.config.globalProperties.art = art // 通过 globalProperties 将回调函数绑定在全局
app.mount('#app')
页面中读取 需要借助于使用 getCurrentInstance
Api 钩子
方法一
:
<script setup>
import { getCurrentInstance } from "vue" // 引用 getCurrentInstance
// getCurrentInstance().appContext.config.globalProperties 获取全局上下文,可以解构得到 我们前面绑定的数据方法
const { art } = getCurrentInstance().appContext.config.globalProperties
let clicklogin = (formName) => {
art() //直接调用方法本身
}
</script>
方法二
:
<script setup>
import { getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance() //获取 getCurrentInstance 身上的 proxy 代理属性
let clicklogin = (formName) => {
proxy.art() //可以直接在 proxy代理属性身上调用方法。
}
</script>
有细心的小伙伴,会发现 getCurrentInstance
这个Api 在官方文档中,查询不到,这是因为,在最新的V3 官方文档中,对 getCurrentInstance
进行了移除。
至于为何现在还能使用,据说是现在 作为一个隐式的内部 Api 使用
。
上面提到的方法,虽然可以通过 app.config.globalProperties
和 getCurrentInstance
来定义全局方法数据,和读取数据,但是这种方法,并不推荐使用
,如下,官方的描述
相比于上面提到的方法,我们更推荐使用 provide
以及 inject
来实现全局挂载数据方法。
在main.js 中
import { createApp } from 'vue';
import App from './App.vue'
const app = createApp(App)
let art = () => {
alert("事件方法")
}
app.provide("art", art) //将要挂载的参数, 通过 provide ,注入给后代实例
app.mount('#app')
页面中:
<script setup>
import { inject } from "vue"
let art = inject("art") // 通过 inject 可以获取到 全局实例上 通过 provide 所注入的参数值。
let clicklogin = (formName) => {
art()
}
</script>
来源:https://blog.csdn.net/qq_60961397/article/details/130343817
猜你喜欢
- <?php # 设置 $domain 为你的域名 (注意没有www) $domain = "aspxhome.com&quo
- UPDATE语句的速度更新查询的优化同SELECT查询一样,需要额外的写开销。写速度依赖于更新的数据大小和更新的索引的数量。没有更改的索引不
- 本文实例讲述了Python实现的旋转数组功能算法。分享给大家供大家参考,具体如下:一、题目给定一个数组,将数组中的元素向右移动 k 个位置,
- 闲暇时间用tkinter写了个简易计算器,可实现简单的加减乘除运算,用了Button和Entry2个控件,下面是代码,只是简单的用了偏函数p
- 本文实例为大家分享了python微信好友删除的具体代码,供大家参考,具体内容如下#weixin.py#coding:utf-8# !/usr
- python的开发工具有很多种,各有特点,本人一直使用的是pycharm,所以本篇内容仅限pycharm。1,设置python文件头模板当我
- CSS与JS紧密配合,为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属
- 方式一在Python的SQLAlchemy ORM中,您可以使用以下代码动态地更改数据模型类的表名:from sqlalchemy.ext.
- python协程线程和进程的操作是由程序触发系统接口,最后的执行者是系统;协程的操作则是程序员。协程存在的意义:对于多线程应用,CPU通过切
- 在用sqlAlchemy写web应用的时候,经常会用json进行通信,跟json最接近的对象就是dict,有时候操作dict也会比操作ORM
- 简介 开启慢查询日志,可以让MySQL记录下查询超过指定时
- 一般来说,内置的slice()函数会创建一个切片对象,可以用在任何允许进行切片操作的地方。下面是slice的简介:# slice 两种用法c
- 一、前言提到 limit 优化,大多数 MySQL DBA 都不会陌生,能想到各种应对策略,比如延迟关联,书签式查询等等,之前我也写过一篇优
- 大概在九九年做游戏网站的时候,就对文章的发布感到麻烦,不过那会儿玩ASP不精。只是将就用着。在遇到长文件 10000 字时网页就是一大片长了
- 报错现象File "<string>", line 1SyntaxError: unexpected EOF
- 为了自定义一个模板标签,你需要告诉Django当遇到你的标签时怎样进行这个过程。当Django编译一个模板时,它将原始模板分成一个个 节点
- 本文实例讲述了Python双链表原理与实现方法。分享给大家供大家参考,具体如下:Python实现双链表文章目录Python实现双链表定义链表
- 在c语言中可以用system函数调用系统命令并得到输出,通过输出重定向也可以将程序执行的输出保存到文件以供使用,但用起来不是很方便。我这里介
- 前言本系列文章将依据官方文档讲解Webots R2022b的使用教程(Windows10环境)。一、Webots是什么?Webots是一个开
- 1.配置环境操作系统:Ubuntu20.04CUDA版本:11.4Pytorch版本:1.9.0TorchVision版本:0.7.0IDE