1. options Api

  • Usually we pass values from the parent to the child using props, and if we need to pass deep passes like from the parent to the grandson, then we pass props, which can make you angry.

  • In this case, we use provide and inject, which are provided at the parent level and available to all child components, no matter how deeply nested. Then the parent component can use the provide option and the child component can use the Inject option.

  • Use the sample

However, it cannot pass properties on component instances, such as this.name

  • It can be converted to provide a function for substitution, similar to data, to provide an isolation that prevents the provider’s data from being modified when called.

It’s not reactive

  • The data passed in through provide is not responsive. If the provider’s data is modified, it will not change in the user. Therefore, computed data can be used to calculate the incoming data.

2. composition Api

  • Separate definitions, two parameters, one name, one value

  • When injecting, you can provide a default value.

  • Additive response

  • You are advised not to modify data in Inject but modify data in provide. You can also disable changes using readonly