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 是一种非常方便的父子组件通信方式,可以方便地共享数据和方法。