Passing data to your components with props

Simple components behave a little like stamps. You can save yourself from creating the same element many times using components. While it's fine to have the exact same copy of the same component throughout the page, we must have some means of telling the component what to do. This way, we can have the same components thrice, each of which does a slightly different function.

Since everything is reactive in Vue, with props we have a direct line of communication with our components, and you will learn how to use this line in this recipe.

 

Getting ready

You don't need any particular knowledge to complete this recipe, just ensure that you know how to define and register basic components. Look back one recipe if you forgot how to do it.

How to do it...

We will build an icon that represents the sound volume. Adjusting the sound level will change the icon. The icon itself will be a component, like the following:

Vue.component('sound-icon', { 
  template: "<...