在vue2中，我们会把经常使用的方法，变量挂载到 vue.prototype上，例如下面这样
const getParams = (params) => params
Vue.prototype.$getParams = getParams然后我们就可以在任意的组件中 进行 this.$getParams('999')，这种调用，也很是简单方便
但是时代变了，在vue3中，我们不能再去这么操作，这么写了，我们需要采用以下方式
1. 使用 app.config.globalProperties 配合?getCurrentInstance使用
1. main.js
import {
createApp
} from 'vue'
import App from './App.vue'
const app = createApp(App); //创建实例对象
const baseUrl = 'https://www.baidu.com/'
app.config.globalProperties.$baseUrl = baseUrl
app.config.globalProperties.$getFullUrl = (params) => {
return baseUrl + params
}
app.mount("#app") //挂载
2. 使用
<script setup>
import {getCurrentInstance} from "vue";
const {proxy} = getCurrentInstance()
console.log(proxy.$baseUrl)
console.log(proxy.$getFullUrl('123456789'))
</script>打印:
?2. 使用?inject 和?provide，达到目的
1. main.js
import {
createApp
} from 'vue'
import App from './App.vue'
const app = createApp(App); //创建实例对象
const taobao = 'https://www.taobao.com/'
const getFullTaobao = (params) => {
return `${taobao}${params}`
}
app.provide('$taobao', taobao)
app.provide('$getFullTaobao', getFullTaobao)
app.mount("#app") //挂载
2. 使用
<script setup>
import {inject} from "vue";
const taobao = inject('$taobao')
const getFullTaobao = inject('$getFullTaobao')
console.log(taobao)
console.log(getFullTaobao('123456789'))
</script>打印：
?结束！
