Vue3实现provide/Inject响应式数据

vue3实现响应式provide、inject

使用provide/inject

父组件:

import { defineComponent,provide } from "vue";
export default Home({
  setup(){
    let msg= 'Home组件的msg';
    provide('gradMsg',msg)
    return{
    }
  }
});
 

子组件:

import { defineComponent,inject} from "vue";
// inject只能在setup中使用，promise.then()中也是不可以使用的
export default Sun({
  setup(){
    //此处使用inject获取gradMsg
    let gradMsg = inject('gradMsg')
    return{
        gradMsg
    }
  }
});

响应式

父组件:

let msg= ref('Home组件的msg'); // ref作为响应式函数,ref也需要引入
provide('gradMsg',msg);
//另外如果需要全局改变msg,provide接受一个方法作为参数
provide('gradMsgFun',(data)=>{//此处可以接受参数，也可以不接受参数
      msg.value = data
})

子组件:

import { defineComponent,inject} from "vue";
// inject只能在setup中使用，promise.then()中也是不可以使用的
export default Sun({
  setup(){
    //此处使用inject获取gradMsg
    let gradMsg = inject('gradMsg')
    return{
        gradMsg
    }
  }
});

如果需要改变数据：

import { defineComponent,inject} from "vue";
// inject只能在setup中使用，promise.then()中也是不可以使用的
export default Sun({
  setup(){
    //此处使用inject获取gradMsg
    let gradMsgFun= inject('gradMsgFun');
    gradMsgFun('改变父组件msg的值');
  }
});