Friday, May 4, 2018

es6 spead or reset ... , export default {...}

on es6 there is ... symbol,
1) it is transfer an array to and string and the string has been separated by ",";
such as:
var fruit = ["apple", "pear", "kiwifruit"];
console.log(...fruit);

that will be printed as

 apple, pear, kiwifruit;
2) if we are going to extend an array with another array we can do

var fruit =  ["apple", "pear", "kiwifruit"];
var moreFruits = ["pineapple", ...fruit];

the moreFruits is ["pineapple", "apple", "pear", "kiwifruit"];


3) unsure the number of parameters of function:
such as

function add(...vals){
  let sum=0;
  for(let i=0;i    sum+=vals[i];
  }
  return sum;
}

Wednesday, May 2, 2018

Vuejs $emit('close') and v-on

use component -> template @click="$emit('close')

on parent

explain in
https://laracasts.com/series/learn-vue-2-step-by-step/episodes/10?autoplay=true


communicate between parent and children components.

v-on: or @on:coupon_applied="onCouponApplied"
applied is event such as click, blur and so on
onCouponApplied is method or function name
onCouponApplied(dataName) {
  ....
}

this dataName is from children $emit passed dataName.

this method will create the method on the parent or root component.

on the children components
template: ''

in the children methods:
methods: {
  onCouponApplied() {
    this.$emit('coupon_applied', dataName)
  }
}

the dataName is object or array or some data want to send to parent.
$emit: the applied is parent event name. such as coupon_applied