vue学习——provide和inject

转载来自：https://zhuanlan.zhihu.com/p/140824875

栗子

 父组件 index.vue

<template>
    <!-- 父组件 -->
    <div class="views__home">
        <my-children></my-children>
    </div>
</template>

<script>
import MyChildren from './my-children.vue'; // 子组件

export default {
    components: {
        MyChildren
    },
    provide() {
        return {
            student: {
                name: 'xiaoming'
            }
        };
    },
    mounted() {
        console.log(this.student); // undefined
    }
};
</script>

子组件 my-children.vue

<template>
    <!-- 子组件 -->
    <div class="views__home__my-children">
        <my-grandson></my-grandson>
    </div>
</template>

<script>
import MyGrandson from './my-grandson.vue'; // 孙组件
export default {
    components: {
        MyGrandson
    }
};
</script>

孙组件 my-grandson.vue

<template>
    <!-- 孙组件 -->
    <div class="views__home__my-grandson"></div>
</template>


<script>
export default {
    inject: ['student'],
    mounted() {
        console.log(this.student); // { name : 'xiaoming' }
    }
};
</script>
 

可以看出来 my-grandson组件可以直接获取到 index组件传过来的变量，中间不在需要经过 my-children组件

 

 

 

转载来自：https://blog.csdn.net/weixin_43459866/article/details/114691818

处理响应性

 

Vue中， Provide/Inject实现了跨组件的通信。但可惜数据并不是响应式的（设计如此）。

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的

以上引用自官网

可能之所以这样设计，是为了避免数据的混乱。就如同props不能被子组件直接修改一样。

从代码角度讲

  data() {
    return {
        foo: 'foo',
        bar: 'bar'
        baz: {hello: 'world'}
    }
  },
  provide() {
    return {
      foo: this.foo,
      bar: this.bar,
    }
  },

当我们以如上的形式书写代码的时候，其实相当于对this.foo和this.baz做了一层浅拷贝，固当子组件inject的时候已经丢失了响应式功能了。但由于仅仅是浅拷贝，所以响应式对象的属性仍旧是响应式的。

  // 父组件
  provide() {
    return {
      baz: this.baz,
    }
  },
  // 子组件baz.hello仍旧是响应式的。
  inject: ['baz']
  

依照这个思路，如果我们希望整个数据都是响应式的。那么可以通过一下的方法实现：

// 父组件:
{
  provide() {
    return {
      reactiveMsg: () => this.msg
    }
  },
}

// 子组件:
{
  inject: ['reactiveMsg'],

  computed: {
    computedProperty() {
      return this.reactiveMsg()
    }
  },
  watch: {
    computedProperty() {
        console.log('数据改变')
    }
  }
}

如上provide提供一个函数。函数内部返回一个响应式的数据。此时整条数据的响应式的状态并不会丢失。

而且这样做有一个好处，即无法直接修改computedProperty的值，因为他是一个计算属性。这样就可以避免数据的混乱。