Vue: значение по умолчанию для функции проп

Question

Есть ли способ установить функцию по умолчанию для пропеллера с типом функции?

props: {
    clickFunction: {
        type: 'Function'
        default: ????
    }
}

Answer 1

Я бы сказал, всегда предоставляйте значение по умолчанию, которое соответствует указанному вами типу: значительно упрощает анализ.Здесь то, что вы ищете, будет noop-функцией (иначе говоря, функцией, которая ничего не делает):

props: {
  clickFunction: {
    type: Function
    default: () => {}
  }
}

Затем вы можете использовать this.clickFunction() в своем коде, не проверяя его сначала с защитой: это всегда функция.Убедитесь, что вы не перепутали значение по умолчанию для Object реквизита, то есть пустого объекта:

props: {
  someObject: {
    type: Object
    default: () => ({})
  }
}

В Vue реквизиты Object и Array должны иметь своизначение по умолчанию, возвращаемое функцией, чтобы гарантировать, что они различны для каждого экземпляра компонента (что, по-видимому, не требуется для Function реквизита, но документы действительно не совсем ясны по этому поводу).

Answer 2

Я думаю, что это не правильный подход.VUE не работают таким образом.Почему вы хотите передать ссылку на функцию в качестве реквизита?Компонент может выдавать свое собственное событие, которое может перехватить родительский элемент.

Здесь у вас есть доступные типы реквизита: https://vuejs.org/v2/guide/components-props.html

А здесь вы можете прочитать о событиях cutom: https://vuejs.org/v2/guide/components-custom-events.html#Event-Names

Answer 3

Этот способ должен работать с Vue 2.0

props: {
    clickFunction: {
        type: 'Function'
        default(){
          return () => true
        }
    }
}

Answer 4

Да:

Vue.component('foo', {
  template: '<div>{{ num }}</div>',
  props: {
    func: {
      type: Function,
      default: () => 1,
    },
  },
  data() {
    return { 
      num: this.func()
    }
  }
})

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

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