3种Vue3添加公共方法并使用
web前端开发
共 1113字,需浏览 3分钟
·
2021-11-15 18:44
第一种:使用 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')
本文完~
学习更多技能
请点击下方公众号
评论