Vue中provide和inject⽤法及源码解析
provide/inject 官⽅⽂档说明
官⽹总结：
1. 配对使⽤：provide 和 inject 需要成对使⽤
2. 作⽤：祖先组件可向其所有⼦孙后代传递数据
3. 优点：当孙组件想要访问祖先组件的 property 时，通过 provide/inject 可以轻松实现跨级访问数据
4. 场景：provide/inject 主要在开发⾼阶插件/组件库时使⽤，并不推荐⽤于普通应⽤程序代码中
  从使⽤ provide/inject 优点来看，当我们的组件嵌套了多层，孙组件可轻松访问祖先组件的数据，可能⼤家会和我有同样的疑惑：为什么开发中却很少⽤到？
使⽤场景分析
为什么会不推荐⽤于普通应⽤程序代码呢？
  因为数据追踪⽐较困难，不知道是哪⼀个层级声明了这个或者不知道哪⼀层级或若⼲个层级使⽤了。如果数据在多个组件都需要使⽤到，可以使⽤ vueX 来进⾏状态管理。如果只是⼦组件想要使⽤⽗组件上的数据，可直接通过 props 来让⽗组件给⼦组件传值。
为什么推荐使⽤在⾼阶插件/组件库？
  因为在 vue 中⽗⼦组件可以⽤ props 传值，⼦组件也可以通过 $parent 访问⽗组件的 property（不推荐）。但⽗⼦组件 props 传值需要需要知道往哪⼀个⼦组件传值，⽽在组件库中的组件中引⼊的⼦组件是不确定的。⽽ provide 只需要将传递的值注⼊ ，不需要知道使⽤哪⼀个⼦组件，⼦组件通过 inject 获取注⼊的数据，也不需要知道⽗组件是谁，因此再进⾏封装组件库的时候很⽅便。
借⽤⽹上很⽕的 element-ui 组件库的案例来说明⼀下。
  在 element-ui 中，我们经常使⽤⾥⾯的表单，看⼀段熟悉的代码，DOM 结构: el-form > el-form-item > el-input：
element-ui 案例配图1
打开 el-form 这个组件，发现使⽤到了 provide：
element-ui 案例配图2
  这⾥的 el-form组件，提供给⼦孙组件的数据是当前的 vue 实例，这样在⼦孙组件中，都可以使⽤ inject 来接收 el-form 组件提供的 vue 实例。
  再打开 el-form 组件的⼦组件 el-form-item，果不其然，发现⽤到了 inject 注⼊数据：
typeof的用法
element-ui 案例配图3
provide/inject 语法
  provide：是⼀个对象或返回⼀个对象的函数。该对象包含可注⼊其⼦孙组件的数据
  inject：⼀个字符串数组，或⼀个对象。如果是对象，对象的 key 是本地的绑定名，value 是，包含from和default默认值。
⾃制⼩案例

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。