Vue3中的爷爷与祖孙之间的传值

1.父传孙数据:provide

2.子孙得到数据:inject

一.爷爷传孙数据:provide

爷爷组件:

<template>
  <div>我是爷爷组件我有{{ money }}元钱</div>
  <hr />
  <Child></Child>
</template>

<script>
import { ref, provide } from 'vue'
import Child from './Child.vue'
export default {
  name: 'App',
  setup() {
    // 直接把数据传递出去给孙子传
    provide('moneyInfo', 1000)
    const money = ref(2000)
    return { money }
  },
  components: {
    Child
  }
}
</script>

<style></style>

孙组件:使用inject,里面的参数值是爷爷组件传递过来的要保证参数名一致

<template>
  <div>我是孙组件爷爷给了我{{ moneyInfo }}钱</div>
</template>

<script>
// 注入 接到爷爷给的钱
import { inject } from 'vue'
export default {
  name: 'GrandSon',
  setup() {
    const moneyInfo = inject('moneyInfo')

    return { moneyInfo }
  }
}
</script>

<style></style>

父组件:

<template>
  <div>我是父组件{{ money }}</div>
  <hr />
  <grand-son></grand-son>
</template>

<script>
import GrandSon from './grandSon.vue'
export default {
  name: 'Child',
  components: { GrandSon }
}
</script>

<style></style>

二.孙组件向爷爷组件传值:

步骤:

1.爷爷先定义一个空的函数传递给孙子

2.孙子使用inject接收

3.孙子使用按钮等函数中调用爷爷传递过来的函数,()中传递要传递的数据

3.爷爷当初定义的空函数中参数写value,获得的就是孙子传递过来的值

爷爷组件:

<template>
  <div>我是爷爷组件我有{{ money }}元钱</div>
  <hr />
  <Child></Child>
</template>

<script>
import { ref, provide } from 'vue'
import Child from './Child.vue'
export default {
  name: 'App',
  components: {
    Child
  },
  setup() {
    // 直接把数据传递出去给孙子传
    const moneySendGrandson = function(value) {
      console.log('孙子传值给我', value)
    }
    provide('moneySendGrandson', moneySendGrandson)
    const money = ref(2000)
    return { moneySendGrandson, money }
  }
}
</script>

父组件没有变化

孙组件:

<template>
  <div>我是孙组件</div>
  <button @click="sendMoneytoYe">我给爷爷传3000</button>
</template>

<script>
// 注入 接到爷爷给的钱
import { inject } from 'vue'
export default {
  name: 'GrandSon',
  setup() {
    // 接收爷爷的空的函数
    const moneySendGrandson = inject('moneySendGrandson')
    const sendMoneytoYe = function() {
      moneySendGrandson(3000)
    }
    return { sendMoneytoYe }
  }
}
</script>