//爷爷组件中
import { provide , ref } from 'vue'
const money = ref (100) //定义数据
provide( 'money' , money ) //提供数据给孙子组件
const changeMoney = ( m:number ) => { //定义函数
if (money) {
money.value = money.value - m
}
}
provide("changeMoney ",changeMoney) //提供函数给孙子组件
// 孙子组件中
import { inject } from 'vue'
const money = inject('money') //获取传递过来的数据
const changeMoney = inject<m:number> => viod ('changeMoney ') //获取传递过来的函数
举例:如果在孙子组件中想要修改爷爷组件的数据
// 孙子组件中
<button @click="handleMoney">
import { inject } from 'vue'
const money = inject< Ref<number> >('money') //获取数据
const handleMoney=()=> {
if(money) { //在跨组件通信中,可能没有传值,所有这里做一个判断
money.value += 2
}
}
⭐inject函数会默认将数据定义为unknown,所以这里需要定义一下传过来数据的类型