1. provide/inject
-
参数：
{string | Symbol} keyvalue
-
返回值：
- 应用实例
-
用法：
在应用实例上设置一个可以被注入到应用范围内所有组件中的值。当组件要使用应用提供的 provide 值时，必须用
inject来接收。从
provide/inject的角度，应用程序为根级别的祖先，而根组件是其唯一的子级。不要与 provide 组件选项 或组合式 API 中的 provide 方法 混淆。虽然它们也是
provide/inject机制的一部分，但是是用来配置组件provide的值的。
// main.js
import { createApp } from 'vue'
import App from './App.vue'
// 创建应用实例
const app = createApp(App)
// 应用向根组件 App 中注入一个 property
app.provide('user', 'administrator')
选项式API：
// 应用内任意一个子组件
<template>
<div>{{ user }}</div>
</template>
<script>
export default {
name: 'Home',
inject: ['user'],
mounted() {
console.log(this.user) // 'administrator'
},
}
</script>
组合式 API：
// 模版部分与上面相同
<script>
import { inject, onMounted } from 'vue'
export default {
setup() {
const user = inject('user')
onMounted(() => {
console.log(user) // 'administrator'
})
return {
user,
}
}
}
</script>
在
setup()内部，this不是该活跃实例的引用，因为setup()是在解析其它组件选项之前被调用的，所以setup()内的this的行为与其它选项中的this完全不同。
我们在setup()中一般不使用this而是用其他替代方法，且尽量把方法、生命周期钩子、计算属性等放到setup()内实现。避免与其它选项式 API 一起混用。
通过应用 provide 值在写插件时尤其有用，因为插件一般不能使用组件提供值。这是使用 globalProperties 的替代选择。
2. globalProperties
用来添加全局 property，命名冲突时，组件的 property 具有优先权。
类型：
[key: string]: any用法：只适用于选项式API
const app = createApp({})
app.config.globalProperties.foo = 'bar'
app.config.globalProperties.$http = () => {}
// 之前(Vue 2.x)
// Vue.prototype.$http = () => {}
app.component('child-component', {
mounted() {
console.log(this.foo) // 'bar'
}
})
建议全局属性 key 名前面加上$(或者别的自定义标注)，便于和组件属性区分。
那如何在setup()里使用通过globalProperties挂载的全局属性呢？
在如果想在setup()内部访问组件实例，需要用到 getCurrentInstance：
import { getCurrentInstance } from 'vue'
const MyComponent = {
setup() {
const internalInstance = getCurrentInstance()
// 访问 globalProperties
console.log(internalInstance.appContext.config.globalProperties)
}
}
getCurrentInstance 只能在 setup 或生命周期钩子中调用。
但这是 Vue3 提供给高阶场景(譬如库)的方案，非常不建议把它当作在组合式 API 中获取
this的替代方案来使用。因此这里只做了解。
- 延伸：全局过滤器
Vue 3 中删除了过滤器filters，今后用方法调用或计算属性替代它们。
如果在 Vue 2 版本迁移过程中，应用中存在全局注册的过滤器，你可以利用全局属性(globalproperties)在所有组件中使用它:
// main.js
const app = createApp(App)
app.config.globalProperties.$filters = {
textFilter(text, length) {
let shortText = text
const len = length ? length : 20
if (text && text.length > len) {
shortText = text.substring(0, len) + '...'
}
return shortText
}
}
然后就能通过$filters对象在模板中需要处理的地方使用：
<template>
<p>{{ $filters.textFilter(user.introduction, 10) }}</p>
</template>
注⚠️：通过以上方式添加的全局属性在模版中访问都不需要
this。在 选项API 中使用需要this。
其实还有一个 全局 mixin 可以实现全局属性的定义。但mixin是为组件逻辑重用设计的，在 Vue 3 的 组合式 API 出来后已经不建议在应用代码中使用了。
