Vue：prop 函数的默认值

Question

有没有什么方法可以为具有函数类型的道具设置默认函数？

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

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>

Answer 2

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

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

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

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

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

Answer 3

这种方式应该适用于 Vue 2.0

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

Answer 4

带参数的例子：

responseFunc: {
  type: Function, 
  default: (response) => {
    return response.data;
  }
}

Answer 5

我认为这不是正确的方法。 VUE 不是这样工作的。为什么要传递对函数的引用作为道具？组件可以发出自己的事件，父级可以捕获。

这里有可用的道具类型： https://vuejs.org/v2/guide/components-props.html

您可以在此处阅读有关自定义事件的信息： https://vuejs.org/v2/guide/components-custom-events.html#Event-Names

编辑 是的，我的回答不正确，也没有回答问题。 直接回答：是的，有一些方法可以为具有函数类型的道具设置默认函数（查看其他答案）。

模式和用例是题外话，所以我到此结束（但是，有人在回答我的回答时提到了一件有趣的事情）。