provide和inject的用法

1、provide与inject的功能

通过provide与inject，可以把一个祖先组件指定的数据和方法，传递给其所有子孙组件中

provide 和 inject 主要在开发高阶插件/组件库时使用.
由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据,provide和inject是成对出现的.
##2.为什么不使用父子组件props传值呢？
因为父子组件props传值需要需要知道往哪一个子组件传值，而el-form组件中会注入的子组件是不确定的。provide只需要将传递的值抛出，不需要知道使用哪一个子组件，子组件通过inject注入获取数据，也不需要知道父组件是谁，因此在封装组件库的时候很便利。而且props只能在父子组件中传值,涉及到孙组件就不可以使用了.
##3.provider/inject用法
provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量
　　需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。
　　provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。
　　inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值，from是在可用的注入内容中搜索用的 key (字符串或 Symbol)，意思就是祖父多层provide提供了很多数据，from属性指定取哪一个key;default指定默认值。
　　父组件:

<script>
export default {
  // 父组件通过provide将自己的数据以对象形式传出去
  provide(){
    return {
      msg:'一条信息'
    }
  }
};
</script>

子孙组件:

<script>
export default {
  // inject:["msg"], // 使用一个注入的值作为数据入口
  inject:{ //或者写成对象
    // 使用一个默认值使其变成可选项
    msg: { // 键名
      from: 'msg', // 来源
      default: '' // 默认值
    }
  }
}
</script>

小结：

这样我们就可以通过admin模板来做我们的项目了, js高程第四版链接: https://pan.baidu.com/s/18P8ky1YalApRb-HDRENZBQ 可以加公众号获取提取码.

若有不懂的地方，请加q群147936127交流或者vx: ltby52119，谢谢~