vue 3 学习笔记 ——provide 和 inject 用法及原理

Posted 前端人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 3 学习笔记 ——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>

 

以上是关于vue 3 学习笔记 ——provide 和 inject 用法及原理的主要内容,如果未能解决你的问题,请参考以下文章

Vue3 学习总结笔记 (十四)

Vue.js前端框架系统学习——Provider/Inject

Dagger2学习笔记5(关于Lazy,Provide的使用)

[Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript(代码片

vue 2.0源码学习笔记—new Vue ( Vue 初始化过程 )

Vue 开发实战基础篇 # 12:常用高级特性provide/inject