Vue3添加公共方法并使用

时间:?2021-10-08阅读:?33标签:?Vue3

vue3中是不会直接暴露vue对象给你使用了。所以不能想vue2那样直接在原型上挂载,那么该如何实现公共方法的挂载呢?下面以$axios方法为例,介绍vue3添加公共方法的三种方式。


第一种:使用 app.config.globalProperties 添加

import { createApp } from 'vue'
import axios from 'axios'

const app = createApp({
created() {
console.log(this.$axios)
}
})
app.config.globalProperties.$axios = axios
app.mount('#root')

在setup中访问(setup中没有this)

<script setup>
import {getCurrentInstance} from 'vue'
const { proxy } = getCurrentInstance();//获取公用方法proxy.$axios,或者use中方法
const {$axios}=proxy
console.log($axios)
</script>


第二种:使用 app.mixin 添加

import { createApp} from 'vue'
import axios from 'axios'

const app = createApp({
created() {
console.log(this.$axios)
}
})
app.mixin({
methods: {
$axios: axios
}
})
app.mount('#root')


第三种:采用 provide, inject 方法

需要注意的是这种方法需要组建 inject 注入进组件才能使用

import { createApp } from 'vue'
import axios from 'axios'

const app = createApp({
inject: ['$axios'],
created() {
console.log(this.$axios)
}
})
app.provide('$axios', axios)
app.mount('#root')


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/10691

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

Vue3.0面试题

Vue为MVVM框架,当数据模型data变化时,页面视图会得到响应更新,其原理对data的getter/setter方法进行拦截(Object.defineProperty或者Proxy),利用发布订阅的设计模式,在getter方法中进行订阅,在setter方法中发布通知,让所有订阅者完成响应

Vue 3 对 Web 应用性能的改进

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色

Vue.js 3.2 关于响应式部分的优化

Vue 3 正式发布距今已经快一年了,相信很多小伙伴已经在生产环境用上了 Vue 3 了。如今,Vue.js 3.2 已经正式发布,而这次 minor 版本的升级主要体现在源码层级的优化,对于用户的使用层面来说其实变化并不大。

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

Vue3核心Typescript类解析

与使用JavaScript不同的是,用Typescript写Vue程序要需要了解Vue的相关类型。Vue核心的类型,大部分写在@vue/runtime-core包中。Vue页面是由一个个组件组成的,组件在Vue中的类是Component,继承了ComponentOptions

Vue 3自定义指令开发

在Angular和Vue中都有Directive的概念,我们通常讲Directive 翻译为“指令”。在计算机技术中,指令是由指令集架构定义的单个的CPU操作。在更广泛的意义上,“指令”可以是任何可执行程序的元素的表述,例如字节码。

Vue3 Hook 到底是啥黑魔法?

早就听说,React社区,已经全面拥抱Hook。Vue3的发布也支持了自定义Hook,作为只会Vue的旺球体育在线小码农自然要去看看Vue3 Hook到底是啥黑魔法?

全面解析Vue3 Reactive家族和Ref家族API

你是不是习惯了Vue2的赋值即响应式?Vue2还有个Vue.observable但你从没用过?结果Vue3像跳跳糖一样跳出来这么多的响应式API,你有没有懵逼的感觉?不慌,挨个学。由于官方文档写的晦涩难懂,所以我写下这篇。

vue3.x初探之v-model的详细使用

用于自定义组件时,v-model的prop和默认事件名更改了,并且移除了model选项,2.x移除了model配置,3.x那又该怎么配置其他prop呢?

点击更多...

内容以共享,参考,研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

Baidu