To start our component, we can create our Vue project with Vue-CLI, as we did in the 'Creating Your first project with Vue CLI' recipe in Chapter 2, Introducing TypeScript and the Vue Ecosystem, or use the project from the 'Creating a dynamic injected component' recipe.
Now, follow these steps to create a dependency injection component:
- Open the StarRating.vue component.
- In the <script> part of the component, add a new property called provide. In our case, we will just be adding a key-value to check whether the component is a child of the specific component. Create an object in the property with the starRating key and the true value:
<script> import StarRatingInput from './StarRatingInput.vue'; import StarRatingDisplay from './StarRatingDisplay.vue'; export default { name: 'StarRating', components: { StarRatingDisplay, StarRatingInput }, provide: { starRating: true, }, props: { maxRating...