Front-end technology community general directory (please check this blog before subscribing)
Example effect
Dependency injectionProvide/Inject
When passing data from parent to child components, props and emit are usually used. When passing data from parent to child, props are used. If a parent component passes data to a grandchild component, it needs to be passed to the child component first, and then the child component is passed to the grandchild component. If multiple child components or multiple grandchild components are used, they need to be passed many times, which will be very troublesome.
In this case, you can use provide and inject to solve this problem. No matter how deeply the component is nested, the parent component can provide data for all child components or grandchild components. The parent component uses provide to provide data, and the child component or grandchild component injects injection. data.
The props subcomponent cannot modify the data of the ancestor component, while the Provide subcomponent is not restricted by one-way data flow and can modify the data of the ancestor component.
Parent component code
<template>
<