Vue3应用API——设置全局属性(app.provide与app.config.globalProperties的区别)


一、app.provide

1.全局注入

  通过 provide 注入一个应用范围内所有组件都可以使用的值

import { createApp } from 'vue'
import App from './App.vue'
let app = createApp(App);

// 通过 app.provide(key, value) 全局注入一个属性 name
app.provide('name', 'provideName');

app.mount('#app');

2.inject接收

  应用范围内任意组件要使用provide提供的的值时,都可以通过 inject 进行接收

<template>
	<!-- provideName -->
    <p>{{ name }}</p>
</template>

<script setup>
import { inject, onMounted } from 'vue';

// 组件中使用 inject 通过 key 接收全局属性
let name = inject("name");

onMounted(() => {
  console.log(name);	// provideName
})
</script>

二、app.config.globalProperties

1.用法

  通过 app.config.globalProperties 来添加全局 property

import { createApp } from 'vue'
import App from './App.vue'
let app = createApp(App);

// 通过 app.config.globalProperties 设置全局属性 myName
app.config.globalProperties.myName = 'globalName';

app.mount('#app');

  组件中:无需接收直接渲染全局属性至模板中

<template>
	<!-- globalName -->
    <p>{{ myName }}</p>
</template>

注:若命名冲突时,组件的 property 具有优先权。

<template>
	<!-- Nancy -->
    <p>{{ myName }}</p>
</template>

<script setup>
import { ref } from 'vue';
let myName = ref('Nancy');		// 命名冲突时,组件的 property 具有优先权。
</script>

三、区别

1.访问方式

  在组合式API setup() 中,我们可以在组件中使用 inject 通过 key 接收app.provide全局注入的值。那如何在setup()里使用通过globalProperties挂载的全局属性呢?
  如果是在 Vue2 中我们通过 Vue.prototype.xxx 的方式设置一个Vue构造函数的原型属性,我们尚可在选项式API中通过this的方式访问该属性。
  如果想在 setup() 内部获取 this,需要用到:getCurrentInstance

<script setup>
import { onMounted, getCurrentInstance } from 'vue';

// Vue3官网中强烈建议不要把它当作在组合式 API 中获取 this 的替代方案来使用。
let internalInstance = getCurrentInstance();
let myName = internalInstance.appContext.config.globalProperties.myName;

onMounted(() => {
  console.log(myName);		// globalName
})
</script>

注:虽然我们成功通过该方式访问了通过 globalProperties 挂载的全局属性,但在Vue3官网中,强烈建议不要把它当作在组合式 API 中获取 this 的替代方案来使用,这里只做了解。

2.使用场景

  上文中,使用 provide 和使用 globalProperties 都可以达到相同的效果。但二者的使用场景却有所不同。
  在实际开发中:
  app.provide 一般用在插件中定义全局的变量,如在Vue3组合式API官方文档中描述:在插件中,我们可以将插件接收到的 options 参数提供给整个应用。那么我们在组件中就可以通过 inject 接收插件的对象 插件中的 Provide / Inject
  app.config.globalProperties一般用在当前应用的全局配置中,可能在应用的很多组件中会使用到。当然插件中也可以使用,基于 install 函数中暴露 app 实例的特性。(若对插件有点懵可以参考:Vue应用API——use解析


  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JV_32

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值