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

1.父传孙数据:provide

2.子孙得到数据:inject

父传孙子  

父组件：
import { ref, provide } from 'vue'
 setup() {
    // 直接把数据传递出去给孙子传  参数一：规定一个爷孙之间的变量名   参数二 要传的值  可以是函数
    provide('sendInfo', 1000)
  }
孙子组件：
// 注入 接到爷爷给的数据 然后就可以用了
import { inject } from 'vue'
 setup() {
   const data= inject('sendInfo')
  }

孙子向爷传数据：

孙子：
// 注入 接到爷爷给的通信函数
import { inject } from 'vue'
 setup() {
    // 接收爷爷的空的函数
    const sendGrandson = inject('sendHandle');
    // 触发send函数的时候 向爷爷通信，给爷爷传递数据
    const send = function() {
      sendGrandson(6000)
    }
    return { send }
  }

爷爷：
import { ref, provide } from 'vue'
 setup() {
     // 给孙子传一个函数  当孙子那里触发向爷爷通信 就会 触发sendGrandson 
    const sendGrandson = function(value) {
      console.log('孙子传值给我', value)
    }
    provide('sendHandle', sendGrandson)
  }

Vue 2 中的 provide/inject 是一种父子组件通信的方式。provide 是在父组件中设置的一个数据源，而 inject 则是在子组件中获取父组件中的数据源。

使用方法：

父/爷组件中使用 provide：

provide: {
  message: 'Hello, world!'
}

子组件中使用 inject：

inject: ['message'],
created() {
  console.log(this.message)
}
provide/inject 是一种非常方便的父子组件通信方式，可以方便地共享数据和方法。