Vue 中provide/inject实现响应式数据更新（组件子孙传值）

港控/mmm° 2023-07-11 11:20 7阅读 0赞

vue.js官方文档：[https://cn.vuejs.org/v2/api/\#provide-inject][https_cn.vuejs.org_v2_api_provide-inject]

## 首先了解Vue.js中provide/inject的基本用法： ##

官方的说明大家可以打开上面的链接去看，说通俗点，就是可以用来父辈们给祖孙传值，请看清楚，这里说的是可以隔代传值，传统的props只能父传子，不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，这就是它最大的特性。

## 基本用法： ##

provide 选项应该是：一个对象或返回一个对象的函数  
inject 选项应该是：一个字符串数组，或 一个对象，对象的 \[key\] 是本地的绑定名  
代码执行顺序：  
data  
provide  
created//在这个阶段$el还未生成，在这先处理privide的逻辑，子孙组件才可以取到inject值  
mounted

首先假设我们在祖辈传入进来是个动态的数据，官方不是说如果你传入了一个可监听的对象，那么其对象还是可响应的么？

parent父页面：

export default {
      data(){
        return { fonnB: 'old word '}  
      },
    provide() {
        return   { foo: this.fonnB }
      },
    created() {
        setTimeout(()=>{
          this.fonnB = 'new words';    // 这里仅仅foonB变化了，foo没有变化
          this._provided.foo="new words"; // 这里foo变化了，但子组件获得的foo 依旧是old words
          console.log( this._provided);
        },1000)
      },
    }

child子页面：

export default {
      inject:['foo'],
      data(){
        return { chilrfoo: this.foo }  
      },
     created() {
        setTimeout(()=>{
          // 子组件获得的foo 依旧是old words
          console.log( this.foo)
        },2000)
      }
    }

## 结果: ##

通过上面方式，经过验证，子组件页面都没办法实现响应更新this.foo的值。可能我们对官方理解还是有误，下面通过网上资料和自己构思实现了响应式数据更新

示例（结果仍不可行）  
很明显上面再父组件定时器内我们是改变了数据源，这个时候我们就在想，我们改变的数据到底有没有传入到子孙组件中，那么要验证这个问题，我们不妨可以在子孙组件中手动写set 函数，computed 本身就只相当于一个get函数，当然，你也可以试试watch

parent父页面：

export default {
        data(){
          return {
            fonnB: 'old word'
          }  
        },
        provide() {
         return   { foo: this.fonnB }
        },
        created() {
          setTimeout(()=>{
            this.fonnB = "new words";    
            // 这里foo变化了，但子组件获得的foo  依旧是old words
          },1000)
        },
      }

child子页面：

export default {
        inject:['foo'],
        data(){
          return {
           childfooOld: this.foo
          }  
        },
        computed:{
            chilrdfoo() {
                return  this.foo
            }
        },
      created () {
            console.log(this.foo)
            // -> 'old word'
            setTimeout(() => {
                console.log(this.chilrdfoo); // 这里计算属性依旧是old words
            }, 2000);
          }
      }

通过computed，我们都知道data中有get/set，数据也是响应式的，但为什么没更新，有点疑惑，如果有大佬知道能解释清楚的可以探讨。

## 但是，但是，但是！实际需求肯定没有这么简单，往往我们需要的是共享父组件里面的动态数据，这些数据可能来自于接口 或者 store。 就是说父组件里面的数据发生变化之后，需要同步到子孙组件里面。这时候该怎么做呢？ ##

我想的是将一个函数赋值给provide的一个值，这个函数返回父组件的动态数据，然后在子孙组件里面调用这个函数。  
实际上这个函数存储了父组件实例的引用，所以每次子组件都能获取到最新的数据。代码长下面的样子：  
Parent组件：

<template>
        <div class="parent-container">
          Parent组件
          <br/>
          <button type="button" @click="changeName">改变name</button>
          <br/>
          Parent组件中 name的值: {
       {name}}
          <Child  v-bind="{name: 'k3vvvv'}" />
        </div>
    </template>
    <script>
    import Child from './Child'
    export default {
      name: 'Parent',
      data () {
        return {
          name: 'Kevin'
        }
      },
      methods: {
        changeName (val) {
          this.name = 'New Kevin'
        }
      },
      provide () {
        return {
          nameFromParent: this.name,
          getReaciveNameFromParent: () => this.name
        }
      },
      // provide: {
      // nameFromParent: this.name,
      // getReaciveNameFromParent: () => this.name
      // },
      components: {
        Child
      }
    }
    </script>

Child组件

<template>
      <div class="child-container">
        Child组件
        <br/>
        <GrandSon />
      </div>
    </template>
    <script>
    import GrandSon from './GrandSon'
    export default {
      components: {
        GrandSon
      }
    }
    </script>

GrandSon组件：

<template>
      <div class="grandson-container">
        Grandson组件
        <br/>
        {
       {nameFromParent}}
        <br/>
        {
       {reactiveNameFromParent}}
      </div>
    </template>
    <script>
    export default {
      inject: ['nameFromParent', 'getReaciveNameFromParent'],
      computed: {
        reactiveNameFromParent () {
          return this.getReaciveNameFromParent()
        }
      },
      watch: {
        'reactiveNameFromParent': function (val) {
          console.log('来自Parent组件的name值发生了变化', val)
        }
      },
      mounted () {
        console.log(this.nameFromParent, 'nameFromParent')
      }
    }
    </script>

## 结果: ##

来自于reactiveNameFromParent ，随着祖先组件变化而变化了

--------------------

作者：竿牍  
链接：https://www.jianshu.com/p/f94a6a2559eb  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[https_cn.vuejs.org_v2_api_provide-inject]: https://links.jianshu.com/go?to=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fapi%2F%23provide-inject