应用一个全局可用属性

export const ZiggyVue = {
    install(app, options) {
        const r = (name, params, absolute, config = options) =>
            route(name, params, absolute, config);

        if (parseInt(app.version) > 2) {
            app.config.globalProperties.route = r;
            app.provide('route', r);
        } else {
            app.mixin({
                methods: {
                    route: r,
                },
            });
        }
    },
};


import {useDark, useToggle} from '@vueuse/core'
/** @type {import('vue').Ref<boolean>} */
const isDarkMode = useDark()
function updateDarkMode() {
    if (isDarkMode.value) {
        document.documentElement.classList.add('dark')
    } else {
        document.documentElement.classList.remove('dark')
    }
}

app.mixin

应用一个全局 mixin (适用于该应用的范围)。一个全局的 mixin 会作用于应用中的每个组件实例。

不推荐

Mixins 在 Vue 3 支持主要是为了向后兼容，因为生态中有许多库使用到。在新的应用中应尽量避免使用 mixin，特别是全局 mixin。
若要进行逻辑复用，推荐用组合式函数来替代。

app.config.globalProperties

一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。

  • 这是对 Vue 2 中 Vue.prototype 使用方式的一种替代，此写法在 Vue 3 已经不存在了。与任何全局的东西一样，应该谨慎使用。
  • 如果全局属性与组件自己的属性冲突，组件自己的属性将具有更高的优先级。

用法

app.config.globalProperties.msg = 'hello'

这使得 msg 在应用的任意组件模板上都可用，并且也可以通过任意组件实例的 this 访问到：

export default {
  mounted() {
    console.log(this.msg) // 'hello'
  }
}

app.provide

应用层 Provide,除了在一个组件中提供依赖，我们还可以在整个应用层面提供依赖：

  • 提供一个值，可以在应用中的所有后代组件中注入使用。
  • 第一个参数应当是注入的 key，
  • 第二个参数则是提供的值。返回应用实例本身。
  • 在应用级别提供的数据在该应用内的所有组件中都可以注入。这在你编写插件时会特别有用，因为插件一般都不会使用组件形式来提供值。
  • 要注入上层组件提供的数据，需使用 inject() 函数

示例

import { createApp } from 'vue'
const app = createApp(/* ... */)
app.provide('message', 'hello')

在应用的某个组件中：

import { inject } from 'vue'

console.log(inject('message')) // 'hello'
Last Updated:
Contributors: BaronYan