[Vue.js] Components based Vue

Creating reuable components

Vue.compent('price', {
  data: function() {
    return {
      prefix: '$',
      value: 22.34,
      precision: 2
    }
  },
  template: '<span> {{ this.prefix + Number.paseFloat(this.value).toFixed(this.precision) }} </span>'

});

//HTML
//You can now use it with <price></price>

 

Using Props

- like an HTML variable

- simple as array of things

 

//HTML
  <div>
    <price 
    :value="item.price", 
    :prefix="'&euro;'", 
    :precision="2", 
    :conversion="0.87"></price>
  </div>
  
 //JS
 Vue.compent('price', {
  data: function() {
    return {
      prefix: '$',
      value: 22.34,
      precision: 2
    }
  },
  props: ['value', 'prefix', 'precision', 'conversion'],
  template: '<span> {{ this.prefix + Number.paseFloat(this.value).toFixed(this.precision) }} </span>'
});

 

Prop Options:

  props: {
    value: Number,
    prefix: {
      type: String,
      default: '$'
    },
    precision: {
      type: Number,
      default: 2
    },
    conversion: {
      type: Number,
      default: 2
    }
  },

• It allows to set values and make default values as well.

 

Emit Options:

• Pass along the name of the events