官方示例
provide源码实现
// nuxtApp定义的provide方法
nuxtApp.provide = (name, value) => {
// 名称添加 $ 符合
const $name = "$" + name;
// nuxtApp中添加 $name 方法
defineGetter(nuxtApp, $name, value);
// 添加Vue实例中添加全局 $name 方法
defineGetter(nuxtApp.vueApp.config.globalProperties, $name, value);
};
// vue实例对象上添加 $nuxt 属性
defineGetter(nuxtApp.vueApp, "$nuxt", nuxtApp);
// 添加Vue实例中全局方法 $nuxt 属性
defineGetter(nuxtApp.vueApp.config.globalProperties, "$nuxt", nuxtApp);
// 对象添加get方法
function defineGetter(obj, key, val) {
Object.defineProperty(obj, key, { get: () => val });
}
使用示例
// 示例一:官方方式
const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', (name) => `Hello ${name}!`)
// 输出 "Hello name!"
console.log(nuxtApp.$hello('name'))
// 示例二:在vue组件中,因为provide在vue实例中添加了全家方法,在vue组件中可以直接使用,如:
this.$hello('name')