Vue中定义全局可以使用的变量和方法
关键词： 【全局方法】 【全局变量】 【全局可用】
- 方法一 和 方法二 适用于需要在所有组件中使用全局方法的情况。
- 方法三 适用于需要在父组件中引用子组件实例并访问其数据和方法的情况。
1 方法一:直接写在 main.js + Vue.prototype 挂载
Vue2 版本
- 在
main.js中写入函数
Vue.prototype.$getToken = function (){
...
}
- 通过
this.$getToken()在所有组件里调用函数
Vue3 版本
- 在
main.js中写入函数
const app = createApp(App);
app.config.globalProperties.$getToken = function () {
// 实现你的逻辑
};
app.mount('#app');
- 通过
this.$getToken()在所有组件里调用函数
2 方法二: exports 暴露 + main.js 引用 + Vue.prototype 挂载
Vue2 版本
- 写好自己需要的
use.js文件,通过exports暴露
export function use(Vue, options) {
Vue.prototype.$getToken = function (){
...
};
};
- main.js 引入并使用
import Vue from 'vue';
import { use } from './use';
Vue.use(use);
- 通过
this.$getToken()在所有组件里可调用函数
Vue3 版本
- 写好自己需要的
use.js文件，通过exports暴露
export function use(app, options) {
app.config.globalProperties.$getToken = function () {
// 实现你的逻辑
};
}
- 在
main.js中引入并使用
import { createApp } from 'vue';
import App from './App.vue';
import { use } from './use';
const app = createApp(App);
use(app);
app.mount('#app');
- 通过
this.$getToken()在所有组件里调用函数
3 方法三：定义全局使用的 vue 组件 Global.vue + 父子组件的方式ref使用
- 编写全局使用的
vue组件Global.vue
<script>
export default {
data() {
return {
token: '12345678'
};
},
methods: {
getToken() {
// 实现你的逻辑
}
}
};
</script>
Vue 2 版本
- 你可以使用
ref来引用子组件实例，并在mounted钩子中访问它。
<template>
<div>
<Global ref="globalComponent" />
</div>
</template>
<script>
import Global from '../../components/Global';
export default {
components: {
Global
},
mounted() {
// 访问子组件实例并调用其方法
this.$refs.globalComponent.getToken();
}
};
</script>
Vue 3 版本
- 你可以使用
ref和onMounted来引用子组件实例，并在组件挂载时访问它。
<template>
<div>
<Global ref="globalComponent" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import Global from '../../components/Global';
// 创建一个 ref 来引用子组件实例
const globalComponent = ref(null);
onMounted(() => {
// 访问子组件实例并调用其方法
globalComponent.value.getToken();
});
</script>
通过这种方式，你可以在父组件中实例化 Global 组件并访问其数据和方法。
