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

// Mixins
let dateRangeFormat = {
  computed: {
  	dateRangeFormat() {
      return `${this.start}-${this.end}`;
    }
  }
}

Vue.component('foo', {
  template: '<div>foo: {{dateRangeFormat}}</div>',
  data() {
    return {
      start: 1,
      end: 2,
    }
  },
  mixins: [dateRangeFormat]
});

Vue.component('bar', {
  template: '<div>bar: {{dateRangeFormat}}</div>',
  data() {
    return {
      start: 3,
      end: 4,
    }
  },
  mixins: [dateRangeFormat]
});

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