inject和reject以及defineProps的区别主要体现在它们在Vue组件通信中的作用和适用场景不同。
inject和provide
inject和provide是一对用于在组件树中向下传递数据的机制。主要通过这两个API来实现数据的跨组件传递，无需通过每一层组件的props传递。
provide：在祖先组件中提供数据或方法。提供的数据可以是对象或函数，祖先组件负责管理和更新这些数据。
示例：祖先组件使用provide导出数据，后代组件使用inject接收数据。祖先组件：provide()方法返回一个对象或函数；后代组件：通过inject接收数据，并可以直接使用这些数据1。
inject：在后代组件中使用，用于注入祖先组件提供的数据或方法。
示例：后代组件通过inject接收祖先组件提供的数据，并可以直接使用这些数据1。
defineProps
defineProps 用于子组件接收父组件传递过来的值。
父传子：父组件通过属性（props）的方式将数据传递给子组件。子组件通过defineProps接收这些数据。数据是单向流动的，子组件不能直接修改父组件传递的数据。
****但是，测试发现，当defineProps 接收的是一个函数时，子组件，可以通过参数的形式，向父组件传参或传值。也是单向的。
父组件
const mytest = ref();
async function getFinancesData(a, b) {
console.log('main +++', FormParams, a, b);
mytest.value = a;
｝
<AsyncViewComponent
:table-data="tableData"
:total="total"
:mytest="mytest"
:get-finances-data="getFinancesData"
/>
子组件：
const props = defineProps<{
getFinancesData: Function;
page: number;
mytest: any[];
tableData: any[];
total: number;
}>();
const handleRefresh = async () => {
try {
console.log('currentPage', currentPage, PageSize);
formParams.per_page = PageSize;
formParams.page = currentPage;
await props.getFinancesData({
// page: currentPage,
// per_page: PageSize,
page: 6,
per_page: 20,
});
} catch (error) {
console.error(' 数据加载失败', error);
}
};
{{ mytest }} 这里，他能够显示 传过去的 a 的值
子组件刷新数据时，父组件可以接受到参数。
另外，有意思的是，在getFinancesData函数内 改变 某个响应式变量值，仍能通过 defineProps 传给子组件
某种情况下，也可以不使用，inject和provide，达到“双向通信”的目的。