[vue3 + TS]祖组件和孙组件通讯provide+inject和注意点

祖组件和孙组件通讯 (依赖注入)

祖组件
//需求:需要孙组件及递组件调用方法`更新`祖组件的数据
const updateTodoItem = ({ index, isCompleted }: { index: number, isCompleted: boolean }) => {
     todosData.todos[index].isCompleted = isCompleted
}
/**提供 or 依赖*/
provide('update',updateTodoItem) /** (名称,[基本数据|方法]) */

孙组件及递组件
/**注入*/
const update = inject('update')
const customFn = ()=>{
	update({index,isCompleted}) /**调用祖组件提供的方法*/
}

注意点:

• 1.不能直接在孙组件绑定注入的方法,此操作和直接修改Props数据同理

• 2.在TS中,inject会报类型unknow的问题,可以使用以下几种方案解决:
  • 2.1 injectionKey /方案解决/
  • 2.2 inject(‘xx’,()=>{}) /初始化赋值[方法,数据]/
  • 2.3 if(typeof xx === ‘function’) xx() /*判断类型为function后,确认类型后再调用注入的方法/

微信扫一扫,免费保护车主号码隐私的挪车码即可到手免费使用