Vue：prop 函数的默认值

Question

有没有办法为具有函数类型的道具设置默认函数？

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

原文由 bakis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的：

 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>

原文由 thanksd 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

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

在 Vue 中， Object 和 Array 必须由函数返回其默认值，以确保它们对于组件的每个实例都是不同的（这似乎不需要 Function 道具，但文档确实对此并不十分清楚）。

原文由 neemzy 发布，翻译遵循 CC BY-SA 4.0 许可协议