公司网站内容建设,中国十大互联网公司排名,电子政务平台官网,wordpress 推荐 主题vue3注册全局属性方法 前言一、app.config.globalProperties1 注册实例2 注册方法 二、依赖注入#xff08;Provide / Inject#xff09;1 注册实例2 注册方法3 一次性多次传入 最后 前言
在使用 Vue 时#xff0c;多个地方使用同一个方法导致每个地方都需要按需引用#… vue3注册全局属性方法 前言一、app.config.globalProperties1 注册实例2 注册方法 二、依赖注入Provide / Inject1 注册实例2 注册方法3 一次性多次传入 最后 前言
在使用 Vue 时多个地方使用同一个方法导致每个地方都需要按需引用从而增加代码量。然而这种做法实际上有助于减少冗余、提高一致性并且是代码重用、抽象或模块化的体现。这种方法提高了代码的维护性、可读性和一致性。
注 自动导入Vue Composition API 函数如 ref, reactive, computed 等可以使用插件 unplugin-auto-import 组件全局注册可以参考官网vue3组件全局注册或者使用插件unplugin-vue-components
一、app.config.globalProperties
一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。
1 注册实例
在 main.js 中引入全局要使用的实例通过 app.config.globalProperties 添加到全局中
//main.js文件
const app createApp(App)
app.config.globalProperties.$Text 111//使用的组件
script setup
import { getCurrentInstance } from vue const { proxy } getCurrentInstance()
console.log(proxy.$Text); //111 /script2 注册方法
同理也是可以注册方法的 这里写了个防抖函数关于防抖函数可以参考这里Vue中使用防抖和节流
//main.js文件
import { debounce } from ./util
const app createApp(App)
app.config.globalProperties.$Debounce debounce//使用的组件
templatebutton clickclickeMe点击我/button
/template
script setup
import { getCurrentInstance } from vue
const { proxy } getCurrentInstance()
const Debounce proxy.$Debounce
const clickeMe Debounce(async () {console.log(await我被点击了);//这里写需要的代码
}, 1000);
/script参考官网app.config.globalProperties
二、依赖注入Provide / Inject
提供一个值可以被后代组件注入。
1 注册实例
script setup
//APP.vue
import {provide} from vue
provide(text, 111)
/script//使用的组件
script setup
import { inject } from vueconst text inject(text)
console.log(text); //111
/script2 注册方法
这里一样的用防抖来举例
script setup
//APP.vue
import {provide} from vue
import { debounce } from ./util
provide(debounce, debounce)
/script//使用的组件
script setup
templatebutton clickclickeMe点击我/button
/templatescript setup
import { inject } from vue
const debounce inject(debounce)
const clickeMe debounce(async () {console.log(await我被点击了);//这里写需要的代码
}, 1000);
/script 效果图 可以看到多次点击后1s内执行了一次
3 一次性多次传入
在 Vue 3 中provide 函数本身不支持一次性传递多个值。但可以通过将多个值包装在一个对象中来实现类似的效果。这样可以通过单个 provide 调用传递多个参数。 代码示例
//APP.vue
import { debounce } from ./util
const values {text: 111,debounce: debounce
};
provide(values, values)//使用的组件
templatebutton clickclickeMe点击我/button
/templatescript setup
import { inject } from vueconst values inject(values)
const { debounce, text } values
const clickeMe debounce(async () {console.log(await我被点击了); //这里写需要的代码
}, 1000);
console.log(text); //111
/script参考Vue3官网组合式 API依赖注入
最后
参考文档Vue3 MaskerFan 博客园
