vue中使用provide/inject响应数据隔代传值

最新推荐文章于 2024-06-26 09:20:14 发布
最新推荐文章于 2024-06-26 09:20:14 发布
阅读量547 收藏 1
点赞数
分类专栏： 工作中的一点记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/javaScript_want/article/details/114980617
版权

父组件：

provide返回一个函数调用函数内部返回响应的数据，即可在其他条件下修改响应数据传递给子代组件

 provide(){
    return {
      itemDataHandle:()=>this.itemData
    }
  },

隔代组件：
隔代组件通过inject获取传输进来的数据
并通过

inject: ['itemDataHandle'],
此时的itemDataHandle是个函数,可以使用computed返回这个函数的结果
computed: {
    getItemDataHandle () {
      return this.itemDataHandle()
    }
  },
Vue学习coderwhy生命周期,$refs的使用动态组件的传值keep-alive异步组件， setup函数的返回值Options API的弊端组件的v-modelMixin的基本使用
VAN
12-13 447
前端八股文
provide和inject实现父元素隔代传参
qq_42931285的博客
10-06 287
三个组件：分别是: parent.vue son.vue grandson.vue // 父组件 <template lang=""> <div> 父组件 <Son></Son> </div> </template> <script> import Son from './son.vue' // 将整个父组件注入后台 provide(){ return{
Vue 的通信方式之隔代组件传值
前端历险记
05-02 1250
父传子 <template> <div> <h2>我是父组件</h2> <Son :version="version" @grandson="grandson" /> </div> </template> <script> import Son from '../components/Son' export default { data() { return{ v
vue3 隔代传值 事件
fanlao4203的博客
04-21 1668
VUE3隔代传值MITT 1.安装mitt npm install --save mitt 2.utils文件夹下，新建一个bus.ts eventbus.ts / mitt库默认导出的是一个函数，我们需要执行它从而得到事件总线的对象 // 这里我们在js中暴露这个事件总线对象 import mitt from "mitt"; const emitter = mitt() export default emitter 3. 使用，使用mitt进行兄弟组件之间的通信实现 或者子孙隔代组件 都可
vue 隔代传值provide/inject方法如何使用？（响应式）
浮生的博客
03-03 980
vue 组件传值的方法有很多，但是项目中有些时候需要隔代传值，例如从曾祖父代网曾孙子代传值，普通的父子传值就比较麻烦，而使用vuex又不太划算，那么这个时候可以使用provide/inject方法；可以隔很多代往下传，但是必须是从上往下传 代码如下所示： 爷爷组件代码如下： <template> <div class="home"> <button @click="tap">爷爷组件传值</button> <child1>&lt
Vue组件间传值（超全，跨代）父传子，子传父，爷传孙，孙传爷，保姆级讲解
SJJ980724的博客
10-19 1万+
前言 看了很多vue组件间传参的帖子，发现很多不完整，今天闲来无事总结一下vue组件间传值，此文涉及到：父传子，子传父，爷传孙，孙传爷的组件间传值，应该能满足日常开发所需。 本次用到的三个组件分别命名为：Father，Son，GrandSon 一、父传子 .........
vue框架使用
qq_45645848的博客
01-11 1440
前端vue基础知识总结，汇总
Vue组件之间数据通信12种方式
xm1037782843的博客
11-24 7237
vue组件通信的12种方式
js 获取vue组件html_vue.js组件如何通信？
weixin_39967096的博客
12-19 224
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系(可能隔多代)。针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、$em...
VUE组件之间通信大全（9种）
weixin_40800275的博客
06-26 1279
在实际研发过程中，我们会将页面分解，放在中。这个时候组件之间通信在所难免！如何进行组件通信？子组件如何使用父组件的元素？父组件如何获取子组件的数据？隔代组件如何通信？兄弟组件之间如何通信？任意组件之间如何共享数据？等等。本文共讲解了VUE中9种组件通信/数据共享方式，并提供。方式1：defineProps（父传子、子传父）父组件中使用变量形式传给子组件、子组件1.1 父组件代码1.2 子组件代码用defineProps 直接接收父类传来的值、对象、方法等1.3 效果展示。
vue组件的五种传值方法(父子\兄弟\跨组件)
pckzzy107的博客
08-22 1381
子组件向父组件传数据使用自定义事件， vue 组件提供了一个emit(‘自定义事件名’， 传递的数据) )，子组件传递数据时，触发响应的事件函数，就会自动触发通过$emit给父组件绑定的自定义事件，自定义事件接受一个参数，参数就是子组件传递过来的数据。// 父组件代码，渲染子组件method:{// 子组件代码。
vue之隔代组件通信
weixin_44395929的博客
03-30 2098
今天学习一下vue的隔代组件通信方式,我是找了三篇论文来学习,当然了,方法还有很多。vuex和和本地存储都能实现。对于一个程序员来说,实现一个需求的方式有n多种,但是思路肯定是那么几个。这里就选了三种方法来拓展思路。 一、 $attrs和 $listeners 打开$attrs和 $listeners的详细讲解 二、provide/inject 打开provide/inject的详细讲解 三、ev...
vue3.0学习笔记 (provide和inject组件传递数据)
m0_58849641的博客
07-09 1062
1.在子或者后代组件用inject注入数据进去
vue中的provide和inject
weixin_33976072的博客
05-24 208
2019独角兽企业重金招聘Python工程师标准>>> ...
【vue】组件之间通过provide/inject共享数据
Riptide
07-24 4056
组件之间共享数据的方式常用的有： 1, props 属性传递数据 2, emit 事件    a: 全局的eventHub机制    b: 父组件调用子组件使用v-on:eventName="handleFunc"，子组件在需要的时候调用this.$emit(eventName, params)即可。 3, vuex 4, ref 父组件给子组件添加一个ref引用，<child-compo...
VUE2 VUE3 父子、隔代、兄弟组件的传值方式
热门推荐
alokka的博客
02-12 2万+
时隔一年多 vue 又增加了新的方法 2.2.0 新增 provide 和 inject （隔代传值） 2.4.0 新增 \$attrs 和 \$listeners （隔代传值）
vue的provide/inject实现响应式数据
书读百遍，其义自见
04-18 635
父 export default { provide() { return{ templateId: this.templateIdValue } }, data() { return { templateIdValue: {value: ''} } }, mounted() { this.templateIdValue.value = this.$route.params.templateId } } 子 expo
provide传一个从后台返回或者需要计算的值
Sheep000000的博客
08-12 308
返回一个方法给子组件 方法内部返回数据 响应式 父组件 props: ['infoData'], provide() { return { info: this.getInfo } }, data: function () { return { info: '', } }, methods: { // 发送请求 根据id查询个人数据信息 async getInformationById () { // let result
vue3 provide与inject 异步传值问题。
草莓味的青
11-26 4489
我们经常遇到一个需要等接口返回一个复杂数据类型完成之后再在孙组建或者子组件中获取其值 因为数据异步问题，这样子组件是拿不到值的，此时 我们可以把provide改成以下写法 provide('menuList', computed(() => state.menuList)) 然后再子组件中正常接收即可。 ...
vue3provide/inject 动态传值
最新发布
01-01
### 使用 Vue 3 `provide` 和 `inject` 进行动态传值 在 Vue 3 中，`provide` 和 `inject` 不仅可以用来静态传递数据，还可以动态更新并反映到所有使用该数据的后代组件中。下面是一个详细的示例说明如何实现这一点。 #### 创建可变状态并通过 Provide 发布 为了使提供的属性能够响应变化，在创建时应将其封装在一个响应式对象内，比如通过 `ref()` 或者 `reactive()` 函数来定义变量： ```javascript import { createApp, ref } from 'vue'; // 定义一个根实例应用 const app = createApp({ setup() { const message = ref('初始消息'); function updateMessage(newMsg){ message.value = newMsg; } // 将message作为provides的一部分暴露出去 return { provide: () => ({ msg: message, changeMsg: updateMessage }) }; } }); ``` 这里不仅提供了 `msg` 数据项还提供了一个修改它的函数 `changeMsg`[^2]。 #### 子组件 Inject 接收并展示/操作 接下来是在子组件里利用 `inject` 获取来自父级或其他祖先级别的共享资源： ```html <template> <div class="child"> {{ localMsg }} <!-- 添加按钮触发更改 --> <button @click="updateLocalMsg">改变消息</button> </div> </template> <script> export default{ name:'ChildComponent', inject:['msg','changeMsg'], // 注入所需的内容 data(){ return { localMsg:this.msg // 初始化localMsg为注入的消息 }; }, methods:{ updateLocalMsg(){ this.changeMsg('新消息'); // 调用变更逻辑 } }, watch:{ msg(newValue){ this.localMsg=newValue; // 当外部提供的msg发生变化时同步本地副本 } } } </script> ``` 此代码片段展示了怎样监听被注入的对象的变化，并相应调整内部的状态以保持一致[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值