Vue.js mixins在重写实现中调用父方法

时间:2017-08-12 19:31:36

标签: javascript vue.js mixins

我在项目中使用vuejs-datepicker组件但是我需要一些自定义行为,这就是为什么我决定创建自己的日期选择器并将vuejs-datepicker注入mixin的原因。解决方案工作正常,但我正在寻找一种方法来调用我重写的父方法。这就是我的组件现在所寻找的方式:

  import Datepicker from 'vuejs-datepicker'

  export default {
    props: {
      /**
       * My custom property startDate to open a calendar on the given date by default
       */
      startDate: {
        validator: function (val) {
          return val === null || val instanceof Date || typeof val === 'string'
        },
        default: new Date()
      }
    },

    mixins: [ Datepicker ],

    methods: {
      /**
       * I override parent method setPageDate to read default startDate when none is specified
       */
      setPageDate (date) {
        // my code to set default date from the property
        if (!date) {
          date = this.startDate
        }

        // this part is the same as in the original method
        this.pageDate = new Date(date.getFullYear(), date.getMonth(), 1, date.getHours(), date.getMinutes()).getTime()
      }
    }
  }

只有一行复制的代码并不是什么大不了的事,但我希望将来我需要覆盖更多的方法。所以我正在寻找在我的实现中调用父方法的最佳方法,例如this.parent(date)this.super(date)。有可能吗?

1 个答案:

答案 0 :(得分:18)

没有super或类似的东西。你可以做这样的事情:

  setPageDate (date) {
    // my code to set default date from the property
    if (!date) {
      date = this.startDate
    }

    Datepicker.methods.setPageDate.call(this, date)
  }