VUE依赖注入provide与inject，子组件可以使用父组件定义函数

最新推荐文章于 2024-08-16 23:32:06 发布
最新推荐文章于 2024-08-16 23:32:06 发布
阅读量182 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63853518/article/details/130357094
版权

1，理解：provide与inject需要一起使用，允许一个祖先向所有子孙后代注入一个依赖，不论组件层次多深（provide与组件生命周期同级，且需要返回值provide(){return{传递函数}）

2，写法

父组件写法：

provide(){
return{
map:this.map()//要传方法或数据
}}

子孙组件写法：

inject:["map"]//与组件生命周期同级
//使用直接this调用
this.map

备注：provide与inject并非响应式

老猪1993
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解Vue实战指南之依赖注入(provide/inject)
10-17
`provide` 和 `inject` 的优势在于它们可以跨越任意多的组件层级，让组件间的依赖关系更加清晰。但是，它们也带来了一些潜在的问题，比如增加了组件间的耦合度。官方文档建议，`provide` 和 `inject` 主要用于高阶...
Vue通过provide inject实现组件通信
10-14
由于所有组件的父组件都是`app.vue`，所以可以通过`app.vue`来共享数据。例如： ```javascript <router-view></router-view> export default { provide () { return { app: this } }, data () { ...
vue3的provide和inject实现父子传递
iseyre的博客
01-03 678
provide：提供依赖是一个对象，或者是一个返回对象的函数。里面包含要给子孙后代的东西，也就是属性和属性值。 inject：注入依赖一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值 父组件： <template> <div class="home"> {{num}} <input type="text" v-model="num"/> <!-- 子组件1 --> <one.
vue3中的父子组件传值(provide/inject)
aaaaaikl的博客
01-03 1081
在vue3中的父子组件一般都用provide 和 inject 传值 父组件中引入和注册了子组件之后 在script标签下引入provide就可以将父组件中的变量或方法传递出去 在子组件中就可以用inject来接收一下 不管子组件的层级有多深都可以接收到 具体操作 provide('变量名'，'变量') inject('变量名') provide('事件名','事件') inject('事件名','事件') ...
Vue组件基础(父向子、子向父、子向子传值、依赖注入)
Gik99的博客
03-03 702
Vue组件基础(父向子、子向父、子向子传值)
依赖注入（provide & inject）
ruangong1240237021的博客
12-19 270
一个父组件相对于与其所有的子组件，会作为依赖提供者，任何后代组件，无论链路有多深，都可以注入父组件提供给整条链路的依赖
vue 多层子组件调用父组件的方法（传参方式bind方法 或 注入 provide() {}方法）
Web_Notes的博客
12-09 2192
一，bind方法的使用 例: ui作为一个对象 data() { return { ui:{}//ui作为一个对象 } } 初始化中，给ui绑定一个方法editDesignTree，使用bind指针指向某个具体方法 //初始化中，给ui绑定一个方法editDesignTree，使用bind指针指向某个具体方法 init(){ this.ui.editDesignTree = this.editDesignTreeFun.bind(this) }, editDesignTreeFun(
Vue 2.0 中依赖注入 provide/inject组合实战
10-16
Vue 2.0 的依赖注入（Dependency Injection）机制主要由 `provide` 和 `inject` 两个选项组成，它们提供了一种在组件树中跨层级传递数据的方法，避免了通过逐层传递 props 的复杂性。这一特性尤其适用于在复杂的组件...
13.（vue3.x+vite）组件间通信方式之provide与inject.rar
09-19
在Vue3.x中，父组件可以在实例创建时或者在`setup()`函数中使用`provide()`方法来提供数据： ```javascript import { provide } from 'vue' export default { setup() { const value = '这是父组件提供的值' ...
Vue官方文档(25):父组件通过provide向子组件传递数据，子组件通过inject接收
amadeus_liu2的博客
11-01 234
vue
vue3之provide、inject多代传值、子传父方法
qq_39025142的博客
11-29 1985
vue3 中多代之间传值 vue3 依赖注入方式 通过 provide 方式提供数据 import { provide } from 'vue' setup() { provide('father',110) } 其他组件通过 inject 接收 import { inject } from 'vue' setup() { console.log(inject('father')) //110 } 可以使用 eventBus 传值（相对麻烦，不在叙述
vue3 父子组件传参provide inject ，响应式监听provide参数
潜心
03-16 5110
最近在学习vue3，联系中出现了一个场景，需要子父组件传参，根据需求我需要使用provide 和inject 这俩个函数，因为我的子父组件的层级是复杂的。开始想到了事件总线bus,然而— 官方文档写的很清楚： 所以我选择provide. 那么provide在传参的时候用inject来接收。很多的帖子已经有写，在vue3里面是函数式编程，这俩兄弟也成了函数式。 看下例子： 第一个参数是属性名，第二个是属性值，那问题来了，我想同时传入多个对象该怎么做，我通过查阅文章发现，大家的解决办法是再写一个provid
【VUE实战问题记录】Vue 子组件调用父组件的使用方法 provide/inject 使用
向着太阳迎着光
05-10 1042
编写项目的时候，要对代码进行抽离，封装成一个单独的组件，这个时候数据的传输，方法的调用就成了一个很大的问题，那么我们来实现如何在父组件中调用子组件。 第1种方法：provide/inject 在某些场景下，我们的组件嵌套层级会非常深，这个时候如果使用 props 的方式传递祖先组件的方法或属性，并不是一个明智的选择，我们应该使用 provide/inject 来跨层级访问祖先组件的数据 父组件 // Parent.vue <template> <div class="container
Vue依赖注入的详细用法，1分钟说清利弊
黑客与画家
05-13 3017
背景 关于Vue组件的通讯方式相信大家能倒背如流 父子组件：通过prop，$emit，【$root，$parent，$children】 非父子组件：Vuex实现，父子层层传递、中央事务总线Bus，$ref 子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。应当节制地使用它们，其只是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信. Vue官网建议，在正常情况下，这两种方式已经能满足绝大多数甚至所有的业务需求，对于应用程序代
11.动态标签页的一些优化和bug的解决
最新发布
qq_55121347的博客
08-16 297
动态标签页的一些优化和bug的解决
详细介绍 Vue3 的 watch 和 watchEffect
weixin_52648900的博客
08-15 972
非常详细介绍了vue3的watch和watchEffect区别和联系
实现父组件调用子组件方法时报错：[Vue warn]: Invalid vnode type when creating vnode: null.
08-14 387
[Vue warn]: Invalid vnode type when creating vnode: null.
element table 判断当前行是否展开和只展开一行
m0_68716504的博客
08-15 456
element组件提供了table的展开和收起功能，并提供了expand-change事件用来监听table行的展开和收起在一些特殊情况下如：处理异步数据时，希望展开行时请求接口，关闭行时不用请求，但是expand-change，无论是展开还是收起都会触发，于是就希望能有一个类似isExpended布尔类型的状态属性来判断是否调用接口。
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 371
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
vue3 script setup 中 父组件 响应子组件事件 通过 provide inject 写法实现
04-01
在 Vue3 中，可以使用 `provide` 和 `inject` 来实现父组件响应子组件事件的功能。 首先，在父组件中，使用 `provide` 方法将需要响应子组件事件的函数传递给子组件： ```vue <template> <div> <child-component :on-click="handleClick"></child-component> </div> </template> <script> import { defineComponent, provide } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default defineComponent({ components: { ChildComponent }, setup() { const handleClick = (event) => { console.log('clicked', event); }; provide('handleClick', handleClick); return {}; }, }); </script> ``` 在子组件中，使用 `inject` 方法获取并执行父组件提供的函数： ```vue <template> <button @click="handleClick">Click me</button> </template> <script> import { defineComponent, inject } from 'vue'; export default defineComponent({ props: { onClick: Function, }, setup() { const handleClick = () => { const onClick = inject('handleClick'); onClick('child clicked'); }; return { handleClick }; }, }); </script> ``` 在子组件中，使用 `inject` 方法获取父组件提供的函数，并在点击事件中执行该函数。在父组件中，使用 `provide` 方法将函数传递给子组件，并使用一个字符串作为键名，以便子组件可以使用 `inject` 方法获取该函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值