在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)
第二种:使用 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 注入【关注尚硅谷,轻松学IT】进组件才能使用。
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')
文章来源于web前端开发
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.