vue中provide和inject 用法

    我们平时在开发的时候，最常用的父子组件通信方式就是父组件绑定要传递给子组件的数据，然后子组件通过props属性接收。但是一旦组件层级变多时，采用这种方式一级一级传递值非常麻烦，而且代码可读性不高，不便后期维护。而且如果父组件内子组件较多，还需要对每一个子组件一一去绑定数据。

    所以vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题。在provide中指定要传递给子孙组件的数据，子孙组件通过inject就可以注入祖父组件传递过来的数据，不论组件层次有多深，始终生效。

首先来看下两者的概念：

1. provide：是一个对象，或者是一个返回对象的函数。可以将想要传递给子孙组件的属性写入该对象中。

        注意：若子孙组件中的provide和父组件中provide提供的key有所相同，那么子孙组件会覆盖原本父组件的value

2. inject：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名，value 是： 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或 一个对象，该对象的： from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol) default 属性是降级情况下使用的 value

然后看下具体使用的案例：

parent.vue

<template>
  <div>
     这是一代组件
  </div>
</template>

<script>
export default {
  components: {
    MergeTipDialog,
    BreakNetTip
  },
  data () {
    return {}
  },

 // 父组件中返回要传给下级的数据
  provide () {
    return {
      test:'这是一代组件的数据',
      onChange:()=>{}
    }
  },
  methods: {
   
  }
}
</script>

child.vue 

<template>
  <div>
    这是父组件传递的{{test}}
  </div>
</template>
<script>
import PopupAssign from '../PopupAssign'
export default {
 //引用
  inject: ['test'],
  inject: {
      test:{
       from:'test',   // 如果它需要从一个不同名字的属性注入，则使用 from 来表示其源属性
       default:'xxxx'
      },
     _change: { // 命名与子组件冲突可以更改别名
      from: 'onChange'
    },
  },
 methods:{
   onChange(){

    }
 }
  
}
</script>

 上面就是使用provide和inject 完成的组件之间的传值

在这里要注意，祖先组件不知道哪些后代组件使用它提供的属性 后代组件不知道被注入的属性来自哪里，这里可能会导致数据比较难追踪定位，所以不推荐大家随便使用这个。