Vue：prop函数的默认值

Question

有什么方法可以为带有功能类型的道具设置默认功能？

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

Answer 1

我会说，始终提供与您指定的类型匹配的默认值：使事情更容易推理。在这里，您要寻找的是一个 noop 函数（也就是什么都不做的函数）：

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

然后this.clickFunction()，您可以在代码中使用，而无需首先进行防御性检查：它始终是一个函数。确保您不会与Objectprop的默认值混淆，这将是一个空对象：

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

在Vue公司，Object和Array道具必须将其默认值函数的返回，以确保它们是不同的组件的每个实例（这似乎并不需要为Function道具，但实际上文档不清澈的这个）。

Answer 2

是：

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>