vue 3 学习笔记 (八)——provide 和 inject 用法及原理(Vue 3 learning notes (8) — Usage and principle of provide and 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>
————————

Props and emit are usually used when transmitting data between parent and child components. Props is used when transmitting data from parent to child. If a parent component transmits data to a child component, it needs to be transmitted to the child component first, and then to the child component. If multiple child components or multiple child components are used, it needs to be transmitted many times, which will be very troublesome.

In this case, you can use provide and inject to solve this problem. No matter how deep the component is nested, the parent component can provide data for all child components or grandchildren. The parent component uses provide to provide data, and the child components or grandchildren inject data. At the same time, it is more convenient to transfer values between brother components.

一、Vue2 的 provide / inject 使用

Provide: an object containing attributes and values. For example:

provide:{
 info:"值"
}

If provide needs to use the data in data, an error will be reported. When accessing the component instance property, you need to convert provide into a function that returns an object.

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

Inject: is an array of strings. For example:

inject: [ 'info' ]

Receive the info data provided by the above provider, or it can be an object. The object contains the from and default attributes. From is the key used for searching in the injected content, and the default attribute specifies the default value.

In vue2, project / inject applies:

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

Provide / inject is similar to the subscription and publication of messages. Provide provides or sends data, and inject receives data.

二、Vue3 的 provide / inject 使用

Provide / inject is used in the composite API. The two can only be called during setup. Before use, the provide / inject method must be imported from Vue display.

The provide function receives two parameters:

provide( name,value )

Name: defines the name of the property provided.

value :property 的值。

When in use:

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

The inject function has two parameters:

inject(name,default)

Name: receive the attribute name provided by the provider.

Default: set the default value. It can be left blank. It is an optional parameter.

When in use:

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

Complete instance 1: provide / inject instance

//父组件代码
<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>

3、 Add responsiveness

To add responsiveness to provide / inject, use ref or reactive.

Complete example 2: provide / inject response

//父组件代码
<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>

In the above example, the value of info will be modified in both parent and child components.

Provide / inject is similar to the subscription and publication of messages. It follows the single data flow in Vue. What does it mean? Where the data is, the modification can only be made, and the data cannot be modified at the data transfer, which is easy to cause unpredictable status.

When modifying the value in the subscription component, it can be modified normally. If other components also use the value, the state is easy to cause confusion, so it is necessary to avoid the problem at the source.

readonly   Read only functions need to be introduced before use. If the readonly attribute is added to a variable, the data can only be read and cannot be changed. A warning will be issued when it is modified, but the value will not be changed.

usage method:

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

After running for two seconds, the browser issues a warning that the info value cannot be modified.

Therefore, we add a read-only attribute to the data transmitted by provide to prevent the transmitted data from being modified.

Add readonly at the provide of complete instance 2.

provide('info', readonly(info))

When the sub component modifies the value, there will be a read-only reminder.

When modifying the value, you still need to modify the data in the component that provides the data, so you will add the modification method in the component and publish it at the same time. You can call it at the sub component. For example:

//发布
let info = ref("今天你学习了吗?")
const changeInfo = (val)=>{
 info.value = val
}
provide('info',readonly(info))
provide('changeInfo',changeInfo)

//订阅
const chang = inject('changeInfo')
chang('冲向前端工程师')

Complete example 3: modifying data

// 父组件代码
<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>