Passing data to your component – props

Having the balance as a component is great, but not very good if the balance is fixed. Components really come into their own when you add the ability to pass in arguments and properties via HTML attributes. In the Vue world, these are called props. Props can be either static or variable. In order for your component to expect these properties, you need to create an array on the component by using the props property.

An example of this would be if we wanted to make a heading component:

      Vue.component('heading', {
        template: '<h1>{{ text }}</h1>',

        props: ['text']
      });

The component would then be used in the view like so:

      <heading text="Hello!"></heading>

With props, we don't need to define the text variable in the data object, as defining...