vue3 给全局(每个实例) 添加公共方法
众所周知,vue3,现在不会暴露 Vue 对象给你用了!那么该如何给 它的每个子组件实例添加公共的方法呢?vue2 添加的方法很简单import Vue from 'vue'Vue.prototype.funcName= function() { ... }vue3 添加公共方法的三种方式第一种:使用 app.config.globalProperties 添加import { createApp
·
众所周知,vue3,现在不会暴露 Vue 对象给你用了!
那么该如何给 它的每个子组件实例添加公共的方法呢?
比如我们需要给每个实例添加 $axios 方法
vue2 添加的方法很简单
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$axios = 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
window.vm = app.mount('#root')
第二种:使用 app.mixin 添加
import { createApp} from 'vue'
import axios from 'axios'
const app = createApp({
created() {
console.log(this.$axios)
}
})
app.mixin({
methods: {
$axios: axios
}
})
window.vm = 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)
window.vm = app.mount('#root')
更多推荐
已为社区贡献6条内容
所有评论(0)