Vue3中的祖孙传值

        当我们遇到一个父组件，里面有子组件、有孙组件，有很多后代组件时，需要共享父组件的数据，我们可以用到  ----依赖注入----

     核心就是使用provide方法，传递数据，使用inject接收数据

1、父组件（爷爷组件）向子、孙组件传值

父向子孙传数据：使用provide方法，将数据传出

父组件代码：

<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>

孙子组件通过inject方法接收父组件传过来的数据

孙子组件代码：

<template>
  <div>
    孙子组件:{{moneyInfo}}
  </div>
</template>
<script>
 import { inject } from 'vue'

export default {
  name: 'GrandSon',
  setup () {
  const moneyInfo = inject('moneyInfo')
    return { moneyInfo }
  }
}
</script>

当然子组件也可以接收到父组件向孙子组件出传递的数据，同样使用inject方法

子组件代码

<template>
  <div>
    子组件 {{money}} --- {{moneyInfo}}
  </div>
  <GrandSon />
</template>
<script>
import GrandSon from '@/GrandSon'
import { inject } from 'vue'
export default {
  name: 'Child',
  components: { GrandSon },
  setup (props, context) {
    const moneyInfo = inject('moneyInfo')
   
   return {  moneyInfo }
  }
}
</script>

2、孙子组件向父组件传值，通过provide函数实现

<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>

2、孙子组件获取到这个函数并且调用该函数然后传递数据，

<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>