vue3组件通信（7）——provide和 inject

概述：实现祖孙之间的相互通信；（区别于$attrs，不需要有child组件的参与）

1.父组件向后代组件提供provide数据

提供的可以是数据、对象、方法等；

<template>
  <div class="father">
    <h3>父组件</h3>
    <h3>父亲有{{ money }}存款</h3>
    <h3>父亲有{{ hourse }}房产</h3>
    <h3>父亲有一辆{{ car.brand }}车，价格为{{ car.price }}万元</h3>
    <h3></h3>
    <child/>
  </div>
</template>

<script setup lang="ts">

import Child from "./child.vue";
import {provide, reactive, ref} from "vue";

let money = ref(100)
let car = reactive({
  brand: '奔驰',
  price: 100
})
let hourse = ref(10)

function updatehourse(value: number) {
  hourse.value += value
}


// 向后代提供数据  子 孙  孙孙
provide('qian', money)
provide('car', car)
provide('fangzi', {hourse, updatehourse})

</script>

2.后代接收inject父组件的数据

<template>
  <div class="grand-child">
    <h3>孙组件</h3>
    <h3>父亲给的孙子{{ x }}存款</h3>
    <h3>父亲有一辆{{ car.brand }}车，价格为{{ car.price }}万元</h3>
    <h3>父亲当前房子为{{ fangzi.hourse }}套</h3>
    <button @click="fangzi.updatehourse(1)">点击孙子给父亲一套房产</button>
  </div>
</template>

<script setup lang="ts">

import {inject} from "vue";

// 后代接收传递过来的数据
let x = inject('qian', '我是默认值')
let car = inject('car', {brand: '未知', price: 0})
let fangzi = inject('fangzi', {
  hourse: 0, updatehourse: (value: number) => {
  }
})
</script>

3.后代向父组件传递数据通过函数传参方式

// 父组件通过provide向子组件传递一个函数

function updatehourse(value: number) {
  hourse.value += value
}

// 向后代提供数据  子 孙  孙孙
provide('fangzi', {hourse, updatehourse})

// 子组件通过inject接收传递的函数，并传递参数给函数

<button @click="fangzi.updatehourse(1)">点击孙子给父亲一套房产</button>

let fangzi = inject('fangzi', {
  hourse: 0, updatehourse: (value: number) => {
  }
})