Vue Mixins for Component

Vue Mixins for Component demo by http://qcode.in

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
 <foo></foo>
 <bar></bar>
</div>

JavaScript

// Helpers
function dateRangeFormat(start, end) {
  return `${start}-${end}`;
}

Vue.component('foo', {
  template: '<div>foo: {{range}}</div>',
  data() {
    return {
      start: 1,
      end: 2,
    }
  },
  computed: {
    range() {
      const {start, end} = this;
      return dateRangeFormat(start, end);
    }
  }
});

Vue.component('bar', {
  template: '<div>bar: {{range}}</div>',
  data() {
    return {
      from: 3,
      to: 4,
    }
  },
  computed: {
    range() {
      const {from, to} = this;
      return dateRangeFormat(from, to);
    }
  }
});

new Vue({
  el: '#app'
})