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() {
    	const [from, to] = this.date || [];
      return `${from}-${to}`;
    }
  }
}

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

Vue.component('bar', {
  template: '<div>bar: {{dateRangeFormat}}</div>',
  data() {
    return {
      from: 3,
      to: 4,
    }
  },
  created() {
    const {from, to} = this;
    this.date = [from, to]; // не будет обновляться
  },
  mixins: [dateRangeFormat]
});

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