provide传一个从后台返回或者需要计算的值

本文介绍如何在 Vue.js 中,父组件通过 props 和 provide/inject 将动态获取的 'infoData' 传递给子组件,并实现子组件内响应式调用该信息的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

返回一个方法给子组件 方法内部返回数据

响应式
  • 父组件

    props: ['infoData'],
    provide() {
        return {
          info: this.getInfo
        }
      },
    data: function () {
        return {
          info: '',
        }
      },
    methods: {
      // 发送请求 根据id查询个人数据信息
      async getInformationById () {
        // let result = await getInfofunc( {id: this.params.id} )
        // 测试用于自动登录
        let result = await getInfofunc( {id: 1} )
        this.info = result
        console.log('info', this.info);
      },
      getInfo ()  {
        return this.info
      }
    }
    
  • 子组件

    inject: {
        info: {
          type: Object
        }
      },
    methods: {
      console.log("header-info",this.info())
    }
    
### Vue2 中通过 `provide` 注入函数的用法 在 Vue2 中,`provide` 和 `inject` 是一种用于祖先组件向后代组件递数据和方法的方式。尽管官方文档指出 `provide` 和 `inject` 的绑定不是响应式的,但如果注入的是一个可监听的对象或函数,则仍然可以实现动态更新的效果[^1]。 以下是一个完整的示例,展示如何在 Vue2 中通过 `provide` 注入函数,并在后代组件中使用它: #### 示例代码 ```javascript // 祖先组件 (ParentComponent.vue) <template> <div> <h1>祖先组件</h1> <button @click="changeMessage">更改消息</button> <child-component></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { message: '初始消息' }; }, provide() { return { // 提供一个函数给后代组件 updateMessage: this.updateMessage }; }, methods: { changeMessage() { this.message = '消息已更改'; this.updateMessage(this.message); // 调用提供给后代组件的函数 }, updateMessage(newMessage) { console.log('祖先组件接收到新消息:', newMessage); } } }; </script> ``` ```javascript // 子组件 (ChildComponent.vue) <template> <div> <h2>子组件</h2> <button @click="invokeUpdateMessage">调用祖先组件的函数</button> </div> </template> <script> export default { inject: ['updateMessage'], // 注入祖先组件提供的函数 methods: { invokeUpdateMessage() { const newMessage = '来自子组件的消息'; this.updateMessage(newMessage); // 调用注入的函数 } } }; </script> ``` #### 解释 1. 在祖先组件中,`provide` 方法返回一个对象,其中包含了一个名为 `updateMessage` 的函数。 2. 子组件通过 `inject` 注入了这个函数,并可以在其方法中直接调用。 3. 当子组件调用 `updateMessage` 函数时,实际上是在调用祖先组件中的方法[^2]。 #### 注意事项 - 如果需要在后代组件中修改祖先组件的状态,可以通过 `provide` 注入一个函数来实现,而不是直接递状态[^4]。 - 使用 `provide` 和 `inject` 时需要注意层级限制,它们仅在组件树中有效,不能用于非后代组件之间的通信[^3]。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值