Vue 3 学习笔记—Provide 和 Inject 用法及原理-vue的provide和inject

在父子组件传递数据时，通常使用的是 props 和 emit，父传子时，使用的是 props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。

像这种情况，可以使用 provide 和 inject 解决这种问题，不论组件嵌套多深，父组件都可以为所有子组件或孙组件提供数据，父组件使用 provide 提供数据，子组件或孙组件 inject 注入数据。同时兄弟组件之间传值更方便。

一、Vue2 的 provide / inject 使用

provide ：是一个对象，里面是属性和值。如：

provide:{ 
 info:"值" 
}

如果 provide 需要使用 data 内的数据时，这样写就会报错。访问组件实例 property 时，需要将 provide 转换为返回对象的函数。

provide(){ 
 return{ 
  info: this.msg 
 } 
}

inject ：是一个字符串数组。如：

inject: [ 'info' ]

接收上边 provide 提供的 info 数据，也可以是一个对象，该对象包含 from 和 default 属性，from 是可用做的注入内容中搜索用的 key，default 属性是指定默认值。

在 vue2 中 project / inject 应用：

//父组件 
export default{ 
 provide:{ 
  info:"提供数据" 
 } 
} 
//子组件 
export default{ 
 inject:['info'], 
 mounted(){ 
    console.log("接收数据：", this.info) // 接收数据：提供数据 
 } 
}

provide / inject 类似于消息的订阅和发布。provide 提供或发送数据， inject 接收数据。

二、Vue3 的 provide / inject 使用

在组合式 API 中使用 provide/inject，两个只能在 setup 期间调用，使用之前，必须从 vue 显示导入 provide/inject 方法。

provide 函数接收两个参数：

provide( name,value )

name：定义提供 property 的 name 。

value ：property 的值。

使用时：

import { provide } from "vue" 
export default { 
  setup(){ 
    provide('info',"值") 
  } 
}

inject 函数有两个参数：

inject(name,default)

name：接收 provide 提供的属性名。

default：设置默认值，可以不写，是可选参数。

使用时：

import { inject } from "vue" 
export default { 
  setup(){ 
    inject('info',"设置默认值") 
  } 
}

完整实例1：provide/inject实例

//父组件代码 
<script> 
import { provide } from "vue" 
export default { 
  setup(){ 
    provide('info',"值") 
  } 
} 
</script> 
 
//子组件 代码 
<template> 
 {{info}} 
</template> 
<script> 
import { inject } from "vue" 
export default { 
  setup(){ 
    const info = inject('info') 
    return{ 
      info 
    } 
  } 
} 
</script>

三、添加响应性

为了给 provide/inject 添加响应性，使用 ref 或 reactive 。

完整实例2：provide/inject 响应式

//父组件代码 
<template> 
  <div> 
    info：{{info}} 
    <InjectCom ></InjectCom> 
  </div> 
</template> 
<script> 
import InjectCom from "./InjectCom" 
import { provide,readonly,ref } from "vue" 
export default { 
  setup(){ 
    let info = ref("今天你学习了吗？") 
    setTimeout(()=>{ 
      info.value = "不找借口，立马学习" 
    },2000) 
    provide('info',info) 
    return{ 
      info 
    } 
  }, 
  components:{ 
    InjectCom 
  } 
} 
</script> 
 
// InjectCom 子组件代码 
<template> 
 {{info}} 
</template> 
<script> 
import { inject } from "vue" 
export default { 
  setup(){ 
    const info = inject('info') 
    setTimeout(()=>{ 
      info.value = "更新" 
    },2000) 
    return{ 
      info 
    } 
  } 
} 
</script>

上述示例，在父组件或子组件都会修改 info 的值。

provide / inject 类似于消息的订阅和发布，遵循 vue 当中的单项数据流，什么意思呢?就是数据在哪，修改只能在哪，不能在数据传递处修改数据，容易造成状态不可预测。

在订阅组件内修改值的时候，可以被正常修改，如果其他组件也使用该值的时候，状态容易造成混乱，所以需要在源头上规避问题。

readonly 只读函数，使用之前需要引入，如果给变量加上 readonly 属性，则该数据只能读取，无法改变，被修改时会发出警告，但不会改变值。

使用方法：

import { readonly } from "vue" 
let info = readonly('只读info值') 
setTimout(()=>{ 
 info="更新info" //两秒后更新info的值 
},2000)

运行两秒后，浏览器发出警告，提示 info 值不可修改。

所以我们就给provide发射出去的数据，添加一个只读属性，避免发射出去的数据被修改。

完整实例2的 provide 处添加 readonly 。

provide('info', readonly(info))

在子组件修改值的时候，会有一个只读提醒。

修改值的时候，还是需要在 provide 发布数据的组件内修改数据，所以会在组件内添加修改方法，同时也发布出去，在子组件处调用就可以了。如：

//发布 
let info = ref("今天你学习了吗？") 
const changeInfo = (val)=>{ 
 info.value = val 
} 
provide('info',readonly(info)) 
provide('changeInfo',changeInfo) 
 
//订阅 
const chang = inject('changeInfo') 
chang('冲向前端工程师')

完整示例3：修改数据

// 父组件代码 
<template> 
  <div> 
    info：{{info}} 
    <InjectCom ></InjectCom> 
  </div> 
</template> 
 
<script> 
import InjectCom from "./InjectCom" 
import { provide,readonly,ref } from "vue" 
export default { 
  setup(){ 
    let info = ref("今天你学习了吗？") 
    const changeInfo = (val)=>{ 
      info.value = val 
    } 
    provide('info',readonly(info)) 
    provide('changeInfo',changeInfo) 
    return{ 
      info 
    } 
  }, 
  components:{ 
    InjectCom 
  } 
} 
</script> 
 
//InjectCom 子组件代码 
<template> 
  <div> 
    <button @click="chang('冲向前端工程师')">更新值</button> 
  </div> 
</template> 
<script> 
import { inject } from "vue" 
export default { 
  setup(){ 
    const info = inject('info') 
    const chang = inject('changeInfo') 
    return{ 
      info, 
      chang 
    } 
  } 
} 
</script>