vue3中provide和inject

父子组件间数据通信

父组件 app.vue

import { reactive, provide, ref, watch } from 'vue';
export default {
	...
	setup () {
		const userFlag = ref(false);
        provide('userFlag', userFlag);
		 return {
		 	userFlag
		 }
	}
}

子组件A home.vue

<script>
import { inject, reactive } from 'vue';

export default {
    name: 'HeaderModule',
    setup () {
        const flag = inject('userFlag');
  
        return {
            flag,
        };
    }
};
</script>

子组件B header-module

import { inject, ref } from 'vue';
export default {
    setup () {
        const Flag = inject('userFlag');

        return {
            Flag
        };
    }
};
</script>