vue3 #跨组件通信

//爷爷组件中

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,所以这里需要定义一下传过来数据的类型