首页 > 其他分享 >【Vue基础】provide和inject 依赖与注入

【Vue基础】provide和inject 依赖与注入

时间:2022-08-25 17:48:28浏览次数:66  
标签:Vue provide 响应 inject 组件 foo 注入

Vue组件通信provide和inject,注入

使用场景,祖先组件向下层所有组件注入,无论层级多深,子组件均能接收来自祖先组件。某个模块由根组件内统一管理子组件内的状态。

类型

provide:Object | () => Object
inject:Array<string> | { [key: string]: string | Symbol | Object }

基本使用

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
}

事实上没人用这么用provide和inject。provide的变量默认不是响应的。

但是开发中我们需要provide的变量为响应式,那么如何操作能让provide变为响应式呢?

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

// 父组件provide
  data() {
    return {
      companyData:{},   // 响应式数据
      workShopData:{}
    };
  },
  ...
  provide(){
    return {
      getCompanyData:()=>this.companyData,  //给子组件注入请求回的数据,按照官网要求的格式使数据变为响应式
      getWorkShopData:()=>this.workShopData,
    }
  }
  
// 子组件inject注入
  inject:['getCompanyData','getWorkShopData'],  // 注入你需要的数据
  ...
  computed:{
    companyData(){
      return this.getCompanyData()    // 由于传递的时候是个函数,顾需使用computed计算取出值,此时数据已经完成响应式
    }
  },

场景及注意事项

  • 使用场景,目前遇到的不多,听说和react的context还有angualr的依赖注入相似。祖先组件统一管理状态,无论层级多深,子孙组件将继承到。
  • 其实provide和inject并不适合像vuex和pinna做状态管理,首先他是不可响应式的,其次本身提供的api写法并不是响应式的,说明开发者并不想要使用者用依赖注入来做状态管理,他只适合做单一的祖先组件统一向子组件传递值。或者简单点说,我有一个父组件需要向下面的子组件传递参数统一管理,此时就适合使用provide和inject。
  • 网上抄了些观点,我觉得很好的解释了为什么需要依赖注入。
    • 它是项目前端工程化的体现
    • 它使本来复杂的页面简单化
    • 可以轻松实现代码的复用
    • 它可以避免开发者重复的造轮子
    • 方便团队合作。给定引用的接口,使用者不用管内部实现。(我在项目中使用他管理特定的接口请求页面)
    • 方便前端的调试

标签:Vue,provide,响应,inject,组件,foo,注入
From: https://www.cnblogs.com/wanglei1900/p/16625047.html

相关文章

  • vue 3.0 国密sm2算法加密解密文件流
     针对文件流加密需要考虑性能问题,所以选择部分文件字节加密,破坏文件内容,达到用户不能随意下载打开文件 ts文件:import{sm2}from'sm-crypto';import{Buffer}......
  • antdesign vue中写了样式不加载的解决方法
    在vue组件里,lang设置为less,在style设置为scoped的时候,在写样式有时候对子组件不生效。如果想让某些样式对子组件生效,可以使用/deep/深度选择器。代码:/deep/.ant-men......
  • vue 国际化i18n在弹出框中$t()报错:TypeError: Cannot read properties of undefined (
    废话不用多说,直接上图:   解决思路如下:在main.js文件中把vue挂载到window。window.vm=newVue({el:'#app',i18n:i18n,...})在弹出的窗口中获取window.vmm......
  • vue socket socketio typescript
    main.ts注册和导出,xx.vue导入使用xx.vue在传递给xxx.vue使用注意类型的定义......
  • vue表格之:summary-method="getSummaries"与show-summary(列求和)
    //表格列求和<el-table:summary-method="getSummaries"show-summary></el-table>getSummaries(param){const{columns,data}=paramconstsums=[]......
  • vue接口获取路由菜单
    menuFormat.js(格式化路由表)exportconstinitMenu=(data)=>{letlist=[];data.forEach(router=>{let{path,comp......
  • Vue项目使用高德地图
    流程:注册账号获取KEY安装使用注册链接:https://lbs.amap.com/选择Web端(JSAPI),同时需要域名限制请按提示进行输入:创建完成后即可看到KEY。安装高德地图JSAPI......
  • vue2的nextTick使用
    1、关于nextTick。vue中的Dom更新是异步的,是异步的意味着当被处理数据是动态变化时,此时对应的Dom未能及时更新(同步更新)就会导致数据已经更新(model层已经更新)而视力层未更......
  • vue集成elementUI
    vue集成elementUI1.使用npm安装elementui模块:指令:npm/cnpminstallelement-ui–S2.安装按需引入的插件:指令:npminstallbabel-plugin-component-D3.设置.babe......
  • vue 安装插件 eslint检测警告
    npm安装报错npmERR!codeERESOLVEnpmERR!ERESOLVEcouldnotresolvenpmERR!npmERR!问题原因安装的包与已经存在的包有冲突解决办法npminstallxxx--fo......