vue3+ts 中使用provide和inject

provide? 提供? inject? 注入

provide 和 inject? 是可以跨多级组件使用的。这意味着你可以在任意深度的组件层次结构中使用 provide 在祖先组件中提供数据，然后在后代组件中使用 inject? 来访问这些数据。

C组件是B组件的子组件，B组件是A组件的子组件

例1：传递数据

A组件：(祖父组件)

const car = ref('自行车')
provide('car', car.value)

定义car的变量，使用provide提供出一个数据car供后代使用

C组件：（孙子组件）

let myCar = inject('car')
console.log('myCar', myCar)

使用inject注入爷爷组件的数据，控制台输出：

例2：假如C组件需要触发A组件的方法

A组件：

const changeStatus = () => {
  console.log(1)
}

provide('changeStatus', changeStatus)

C组件：

const changeStatus = inject<() => void>('changeStatus');
const triggerChangeStatus = () => {
   if (changeStatus) {
      changeStatus();
   }
};

同样，如果想C组件触发A组件的方法，并且传递一个数据

C组件

const changeStatus = inject<(data: string) => void>('changeStatus')

const triggerChangeStatus = (val: any) => {
  if (changeStatus) {
    changeStatus(val)
  }
}

A组件

const changeStatus = (val: any) => {
  console.log('valaaaaaaaa====', val)
}

provide('changeStatus', changeStatus)

遇到的问题：

假如C组件有很多个爷爷组件，而有的爷爷向C组件提供了数据或方法，有的没有，那么这样使用，会在没有提供方法或者数据的爷爷组件对应的页面，警告：方法xxx? not? found.

解决：

C组件

const changeStatus = inject<(data: any) => void>('changeStatus', () => {
  return () => false
})

const changeSwitch = (val: any) => {
  if (changeStatus) {
    changeStatus(val)
  }
}

?设定，如果没有提供方法或者数据，默认false