前端技术社区总目录(订阅之前请先查看该博客)

示例效果

13.(vue3.x+vite)组件间通信方式之provide与inject-LMLPHP

依赖注入Provide / Inject

在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传很多次,会很麻烦。
像这种情况,可以使用 provide 和 inject 解决这种问题,不论组件嵌套多深,父组件都可以为所有子组件或孙组件提供数据,父组件使用 provide 提供数据,子组件或孙组件 inject 注入数据。

props子组件是不可以修改祖先组件的数据,而Provide子组件不受单向数据流的限制,是可以修改祖先组件的数据。

父组件代码

<template>
  <
11-15 11:44