问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue3中的指令如何在mounted生命周期钩子函数中获取`app.config.globalProperties`?

头像
看见了
    8792827

    vue3中的指令如何在mounted生命周期钩子函数中获取app.config.globalProperties?

    是写在组件库里，无法获取main.js的app

    vue3directive
    阅读 1.2k
    avatarAI BotBETA

    在 Vue 3 中，如果你想在指令的 mounted 生命周期钩子函数中获取 app.config.globalProperties，你可以通过指令的绑定对象 binding 来访问到与指令相关的上下文信息。binding 对象包含了指令的多个属性，其中一个属性是 instance，它代表了被绑定指令的组件实例。

    由于 app.config.globalProperties 是全局配置对象，通常在应用的入口文件（如 main.js 或 main.ts）中设置，因此你可以通过组件实例的 $app 属性来访问它。但是，请注意，$app 属性在组件内部可能不是直接可用的，你需要确保在组件创建时注入了它。

    以下是一个简单的示例，展示了如何在 Vue 3 指令的 mounted 钩子中获取 app.config.globalProperties：

    import { DirectiveBinding } from 'vue'

const myDirective = {
  mounted(el, binding, vnode, prevVnode) {
    // 通过 vnode.appContext 访问组件的 appContext
    const appContext = vnode.appContext

    // 通过 appContext.config.globalProperties 获取全局属性
    const globalProperties = appContext.config.globalProperties

    // 现在你可以使用 globalProperties 中的任何属性或方法
    console.log(globalProperties.someProperty)
  }
}

export default myDirective

    在这个示例中，vnode.appContext 提供了对组件应用上下文的访问，你可以从中获取到 config.globalProperties。然后，你就可以像使用普通对象一样使用 globalProperties 了。

    请确保在组件创建时注入了 $app 属性，否则 vnode.appContext 可能会是 undefined。如果你使用的是 Vue CLI 创建的项目，通常 $app 会自动注入到组件中。但是，如果你是在其他上下文中使用 Vue，你可能需要手动注入 $app。

    2 个回答
    得票最新
    头像
    toesbieya
      2.2k84672

      vnode.appContext里拿

      头像
      42
        4.1k2624

        src/main.ts

        const app = createApp(App);

app.mount('#app');

export function getGlobalProperties() {
  return app.config.globalProperties;
}

        src/directives/my-directive.ts

        import { Directive } from 'vue';
import { getGlobalProperties } from '../main.ts';

const vDirective: Directive<HTMLElement, never> = {
  mounted(el, binding, vnode, prevVnode) {
    const g = getGlobalProperties();
    console.log(g);
  },
};

export { vDirective };
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题