Vue3如何绑定全局方法和变量

Vue 2 中 Vue.prototype绑定全局方法，此写法在 Vue 3 已经不存在了。与任何全局的东西一样，应该谨慎使用。

Vue3使用provide/inject 或者app.config.globalProperties进行绑定

如果全局属性与组件自己的属性冲突，组件自己的属性将具有更高的优先级。

 

一、provide/inject方法

 1. test.js文件中定义需要绑定的方法和变量

// test.js
export const testFn = () => {
  console.log('testFn---');
}
export const testName = '哎呀'

 2. main.js文件中引入绑定的方法和变量 ，并通过app.provide注入全局方法和变量

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { testFn1, testFn, testName, testName1 } from './utils/test.js';

const app = createApp(App);

// 绑定全局方法
app.provide('testFn', testFn)

// 绑定全局变量
app.provide('testName', testName)

app.use(router);
app.mount('#app');

3. about.vue文件中通过inject获取全局方法和变量 

<!-- about.vue -->
<template>
  <div>about</div>
</template>
<script setup>
import { inject } from 'vue'
const testFn = inject('testFn')
testFn()

const testName = inject('testName')
console.log('testName--', testName);

</script>

---

二、app.config.globalProperties

 1. test.js文件中定义需要绑定的方法和变量

// test.js
export const testFn1 = () => {
  console.log('testFn1---');
}

export const testName1 = '哎呀呀呀'

 2. main.js文件中引入绑定的方法和变量 ，并通过app.provide注入全局方法和变量

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { testFn1, testFn, testName, testName1 } from './utils/test.js';

const app = createApp(App);

// 绑定全局方法
app.config.globalProperties.testFn1 = testFn1

// 绑定全局变量
app.config.globalProperties['testName1'] = testName1

app.use(router);
app.mount('#app');

3. about.vue文件中通过inject获取全局方法和变量 

<!-- about.vue -->
<template>
  <div>about</div>
</template>
<script setup>
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
proxy.testFn1()
console.log('testName1--', proxy.testName1);

</script>

做个记录，如有不足，欢迎补充。

不要忽视你达成的每个小目标，它是你前进路上的垫脚石。冲！