vue3之provide(提供)与inject(注入)

作用： 一个组件往往嵌套这更多的子组件，而这些子组件也许还有他们各自的子孙组件，这时如果我们还使用props方式来传值可能太过复杂和不利于维护，而这两个api就提供了更方便的传值方式，无论你的组件嵌套有多深，只要你在父组件定义了provide，那么在子孙组件调用inject就可拿到provide所在父组件定义的值，所以他们是成对出现
使用

// 父组件
import { ref,provide } from 'vue';
// provide()接受两参数(name: string,data: 传递的数据)
setup(){let init = ref(1);function change(){init.value += 1}provide('init',init) provide('update',change) // 数据响应式的关键，修改数据的方法也要一应传递下去，否则会不响应return {change,init}
}
// 子组件
import { inject,readonly } from 'vue';
// inject()接收两个参数(name: 要接受provide的name,data: 可不填，默认的数据)
setup(){const oneInit = inject('init') // 接收上方传递下来的数据const updateUser = inject('updatea1',readonly(oneInit))// 接收方法，readonly只读，以免外在原因修改了数据return {oneInit,updateUser}
}

vue3之provide(提供)与inject(注入)相关推荐

vue3中 provide 和 inject 用法
前言: 在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时, ...
Vue3 Composition API（三）——生命周期钩子、Provide函数和 Inject函数、封装Hook案例、setup顶层编写方式
一.生命周期钩子我们前面说过 setup 可以用来替代 data . methods . computed .watch 等等这些选项,也可以替代生命周期钩子. 那么setup中如何使用生命周期函 ...
Vue3的provide、inject使用方法
在 Vue3 中,provide 和 inject 是用于跨层级组件通信的方法.可以通过 provide 方法向下传递数据,然后通过 inject 方法在子组件中访问这些数据. provide 方法接 ...
@Inject 注入还是报空指针
@Inject 注入还是报空指针发布于 572天前作者子寒磊 1435 次浏览复制上一个帖子下一个帖子标签: 无 @IocBean @Service("userM ...
vue3中Provide/Inject的使用
vue3中使用Provide/Inject依赖注入,将替代vue2中在原型链上挂载一些属性 //APP.vue//在app.vue内注册import { provide ,ref ,readonly} ...
vue3使用provide/inject实现全局变量功能，部分摆脱vuex
vue3新的provide/inject功能可以穿透多层组件,实现数据从父组件传递到子组件. 这时将所有需要使用的全局变量在根组件就provide,这样,所有的组件都能使用到这个变量. 如果需要变量是 ...
vue3之provide的使用
需求: vue3爷孙组件传值场景:点击编辑按钮,将表格行的id传递给弹框子组件中包含的孙子组件技术栈: vue3+vite+ant-design-vue3.2.0+ts yeye组件- <s ...
Nosql inject注入
0x00 Nosql inject 最近主要在看那个 YApi 的注入漏洞,也是一个 mongodb的注入所以来写一下这个东西,其实现在越来越常见的Nosql注入感觉很多分布式和一些新的系统已经大 ...
Vue3总结（持续更新）
########Vue3基础部分一:ES6新特性栈内存:存放基本数据类型的变量名和变量值:复杂(引用)数据类型的变量名和引用地址堆内存:复杂数据类型的变量值 1.let命令 var 和 let的 ...

vue3之provide(提供)与inject(注入)

vue3之provide(提供)与inject(注入)相关推荐

最新文章

热门文章