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 it in the props array automatically makes it available for use in the template. The props array can also take further options, allowing you to define the type of input expected, whether it is required or a default value to use if omitted.

Add a prop to the balance component so we can pass the cost as an HTML attribute. Your view should now look like this:

      <balance cost="1234"></balance> 

We can now add the cost prop to the component in the JavaScript, and remove the fixed value from our data function:

      template: '<p>{{ formattedCost }}</p>',
      props: ['cost'],
      data() {
        return {
          currency: '$'
        }
      },

Running this in our browser, however, will throw an error in our JavaScript console. This is because, natively, props being passed in are interpreted as strings. We can address this in two ways; we can either convert our prop to a number in our formatCost() function or, alternatively, we can use the v-bind: HTML attribute to tell Vue to accept the input for what it is.

If you remember, we used this technique with our filters for the true and false values—allowing them to be used as Boolean instead of strings. Add v-bind: in front of your cost HTML attribute:

      <balance v-bind:cost="15234"></balance> 

There is an extra step we can do to ensure Vue knows what kind of input to expect and informs other users of your code as to what they should be passing to the component. This can be done in the component itself and, along with the format, allows you to specify default values along with whether the prop is required or not.

Convert your props array to an object, with cost as the key. If you are just defining the field type, you can use the Vue shorthand for declaring this by setting the value as the field type. These can be String, Number, Boolean, Function, Object, Array, or Symbol. As our cost attribute should be a number, add that as the key:

      props: {
        cost: Number
      },

 It would be nice if, rather than throwing an error when nothing is defined, our component rendered $0.00. We can do this by setting the default to just 0. To define a default we need to convert our prop into an object itself - containing a type key that has the value of Number. We can then define another default key and set the value to 0:

      props: {
        cost: {
          type: Number,
          default: 0
        }
      },

Rendering the component in the browser should show whatever value is passed into the cost attribute—but removing this will render $0.00.

To recap, our component looks like :

      Vue.component('balance', {
        template: '<p>{{ formattedCost }}</p>',

        props: {
          cost: {
            type: Number,
            default: 0
          }
        },

        data() {
          return {
            currency: '$'
          }
        },

        computed: {
          formattedCost() {
            return this.currency +       
            this.cost.toFixed(2);
          }
        }
      });

We should be able to expand on this example when we make theperson component of our listing app.