null
在 Vue.js 中定义全局方法，可以通过多种方式实现，包括直接在 Vue 的原型对象上添加方法、使用 Vue 3 的全局 API (app.config.globalProperties)、以及通过混入 (mixin) 等方法。
以下是几种常见的方法：
方法一：在 Vue 2 中通过 Vue.prototype 定义全局方法
// main.js
import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
// 定义全局方法
Vue.prototype.$myGlobalMethod = function () {
console.log('这是一个全局方法');
};
new Vue({
render: h => h(App),
}).$mount('#app');
在组件中使用
<template>
<div>
<button @click="useGlobalMethod">调用全局方法</button>
</div>
</template>
<script>
export default {
methods: {
useGlobalMethod() {
this.$myGlobalMethod();
}
}
}
</script>
方法二：在 Vue 3 中通过 app.config.globalProperties 定义全局方法
// main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 定义全局方法
app.config.globalProperties.$myGlobalMethod = function () {
console.log('这是一个全局方法');
};
app.mount('#app');
在组件中使用
<template>
<div>
<button @click="useGlobalMethod">调用全局方法</button>
</div>
</template>
<script>
export default {
methods: {
useGlobalMethod() {
this.$myGlobalMethod();
}
}
}
</script>
方法三：使用混入（Mixin）
你可以创建一个混入对象并将其全局注册，从而在所有组件中使用这个混入对象定义的方法。
// globalMixin.js
export const globalMixin = {
methods: {
$myGlobalMethod() {
console.log('这是一个全局方法');
}
}
};
// main.js
import Vue from 'vue';
import App from './App.vue';
import { globalMixin } from './globalMixin';
Vue.config.productionTip = false;
// 全局混入
Vue.mixin(globalMixin);
new Vue({
render: h => h(App),
}).$mount('#app');
在组件中使用
<template>
<div>
<button @click="useGlobalMethod">调用全局方法</button>
</div>
</template>
<script>
export default {
methods: {
useGlobalMethod() {
this.$myGlobalMethod();
}
}
}
</script>
方法四：创建插件
你可以创建一个 Vue 插件来封装全局方法，并在 main.js 中安装插件。
// myPlugin.js
export default {
install(Vue) {
Vue.prototype.$myGlobalMethod = function () {
console.log('这是一个全局方法');
}
}
};
// main.js
import Vue from 'vue';
import App from './App.vue';
import myPlugin from './myPlugin';
Vue.config.productionTip = false;
// 安装插件
Vue.use(myPlugin);
new Vue({
render: h => h(App),
}).$mount('#app');
在组件中使用
<template>
<div>
<button @click="useGlobalMethod">调用全局方法</button>
</div>
</template>
<script>
export default {
methods: {
useGlobalMethod() {
this.$myGlobalMethod();
}
}
}
</script>
