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

父组件:

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

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

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

inject: ['itemDataHandle'],
此时的itemDataHandle是个函数,可以使用computed返回这个函数的结果
computed: {
    getItemDataHandle () {
      return this.itemDataHandle()
    }
  },
### 使用 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、付费专栏及课程。

余额充值