关于前端:provide与inject的用法

13次阅读

共计 1097 个字符，预计需要花费 3 分钟才能阅读完成。

通过 provide 与 inject， 能够把一个先人组件指定的数据和办法，传递给其所有子孙组件中

provide 和 inject 次要在开发高阶插件 / 组件库时应用.
因为 vue 有 $parent 属性能够让子组件拜访父组件。但孙组件想要拜访先人组件就比拟艰难。通过 provide/inject 能够轻松实现跨级拜访父组件的数据,provide 和 inject 是成对呈现的.

因为父子组件 props 传值须要须要晓得往哪一个子组件传值，而 el-form 组件中会注入的子组件是不确定的。provide 只须要将传递的值抛出，不须要晓得应用哪一个子组件，子组件通过 inject 注入获取数据，也不须要晓得父组件是谁，因而在封装组件库的时候很便当。而且 props 只能在父子组件中传值, 波及到孙组件就不能够应用了.

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/18P8k… 能够加公众号获取提取码.

若有不懂的中央，请加 q 群 147936127 交换或者 vx: ltby52119，谢谢~

正文完