Vue：prop 函数的默认值

Question

Is there any way to set default function for prop with function type?

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

Answer 1

Yes:

 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>

Answer 2

I'd say, always provide a default value that matched the type you specified: makes things much more easier to reason about. Here, what you are looking for would be a noop function (aka a function that does nothing):

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

You can then use this.clickFunction() in your code without checking it defensively first: it is always a function. Be sure you don't get mixed up with the default value for an Object prop, that would be an empty object:

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

In Vue, Object and Array props must have their default value returned by a function to ensure they are distinct for every instance of the component (which does not seem to be required for Function props, but docs indeed aren't crystal clear about this).

Answer 3

This way should work with Vue 2.0

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

Answer 4

Is there any way to set default function for prop with function type?

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

Answer 5

I think this is not the right approach. VUE do not work that way. Why do want to pass reference to function as props? Component can emit its own event that parent can catch.

Here you have available props types: https://v2.vuejs.org/v2/guide/components-props.html

And here you can read about cutom events: https://v2.vuejs.org/v2/guide/components-custom-events.html#Event-Names

Edit Yeah, my answer is not correct and does not answer the question. Straight answer: yes, there are some any ways to set default function for prop with function type (look other answers).

Patterns and use-cases are off-topic so I end here (however, someone mentioned an interesting thing in response to my answer).