vue3:如何去挂载全局的变量和方法
在vue2中,我们会把经常使用的方法,变量挂载到 vue.prototype上,例如下面这样const getParams = (params) => paramsVue.prototype.$getParams = getParams然后我们就可以在任意的组件中 进行 this.$getParams('999'),这种调用,也很是简单方便但是时代变了,在vue3中,我们不能再去这么操作,这
·
在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>
打印:
结束!
更多推荐
已为社区贡献14条内容
所有评论(0)