Combine API-provide and inject (dependency injection)
Goal: master the use of provide function and inject function to complete the data communication of descendant components
Provide and inject have been widely used in Vue 2. They are not new APIs. In 3.0, we will re-understand them.
One sentence introduction: provide can provide data to all descendant components and provide methods to modify data, and descendant components use inject to use data.
The parent component uses provide to transfer data downward;
the child component uses inject to obtain the data passed by the parent component;
Usage scenario: There is a parent component, there are child components inside, there are grandchildren components, there are many descendant components, and the data of the parent component is shared.
Demo code:
<template>
<div>
<div>父子组件的交互</div>
<button @click='money=200'>修改</button>
<hr>
<Child :money='money' @send-money='getMoney' />
</div>
</template>
<script>
import Child from './Child.vue'
import {
ref, provide } from 'vue'
export default {
name: 'App',
components: {
Child },
setup () {
// 直接把数据传递出去
provide('moneyInfo', 1000)
const money = ref(100)
const getMoney = (value) => {
// value就是子组件传递回来的钱
money.value = money.value - value
}
return {
money, getMoney }
}
}
</script>
grandson component
<template>
<div>
孙子组件:{
{
moneyInfo}}
</div>
</template>
<script>
import {
inject } from 'vue'
export default {
name: 'GrandSon',
setup () {
const moneyInfo = inject('moneyInfo')
return {
moneyInfo }
}
}
</script>
Subassembly
<template>
<div>
子组件 {
{
money}} --- {
{
moneyInfo}}
</div>
<button @click='getMoney'>点击</button>
<GrandSon />
</template>
<script>
import GrandSon from '@/GrandSon'
import {
inject } from 'vue'
export default {
name: 'Child',
components: {
GrandSon },
// 子组件触发的自定义事件需要在emits选项中进行声明（直观的看到本组件触发了那些自定义事件）
emits: ['send-money'],
props: {
money: {
type: Number,
default: 0
}
},
setup (props, context) {
const moneyInfo = inject('moneyInfo')
// Vue3中，使用形参props获取所有父组件传递的数据
// props的数据是只读的，不可以在子组件直接修改
const getMoney = () => {
console.log(props.money)
// this.$emit('send-money', 50)
// 向父组件传递数据50
context.emit('send-money', 50)
}
return {
getMoney, moneyInfo }
}
}
</script>
Summarize:
- Data passed down from father to son: provide
- The descendants get the data: inject
The grandchild component passes the data directly to the grandpa
<template>
<div>
<div>父子组件的交互</div>
<button @click='money=200'>修改</button>
<hr>
<Child :money='money' @send-money='getMoney' />
</div>
</template>
<script>
import Child from './Child.vue'
import {
ref, provide } from 'vue'
export default {
name: 'App',
components: {
Child },
setup () {
// 直接把数据传递出去
provide('moneyInfo', 1000)
// 把一个函数传递给孙子
const handleMoney = (value) => {
console.log('孙子传递的数据：', value)
}
provide('handleMoney', handleMoney)
const money = ref(100)
const getMoney = (value) => {
// value就是子组件传递回来的钱
money.value = money.value - value
}
return {
money, getMoney }
}
}
</script>
grandson component
<template>
<div>
孙子组件:{
{
moneyInfo}}
</div>
<button @click='handleSend'>点击给爷爷数据</button>
</template>
<script>
import {
inject } from 'vue'
export default {
name: 'GrandSon',
setup () {
const moneyInfo = inject('moneyInfo')
const handleMoney = inject('handleMoney')
const handleSend = () => {
// 调用爷爷传递函数
handleMoney(200)
}
return {
moneyInfo, handleSend }
}
}
</script>
Summary: The child component passes data to the grandpa component, which needs to be realized by providing a function
- The grandpa component passes a function, and then obtains data through the formal parameters of the function
- The grandchildren get and call the function to pass the data