javascript Vue：prop 函数的默认值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53659719/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue: default value for prop function
提问by bakis
Is there any way to set default function for prop with function type?
有什么方法可以为具有函数类型的 prop 设置默认函数吗？
props: {
clickFunction: {
type: 'Function'
default: ????
}
}
回答by thanksd
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>回答by neemzy
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 (a.k.a. a function that does nothing):
我会说，始终提供与您指定的类型匹配的默认值：使事情更容易推理。在这里，您要寻找的是一个 noop 函数（也就是什么都不做的函数）：
props: {
clickFunction: {
type: Function
default: () => {}
}
}
You can then use this.clickFunction()in your code without checking it defensively first: it is alwaysa function. Be sure you don't get mixed up with the default value for an Objectprop, that would be an empty object:
然后this.clickFunction()，您可以在代码中使用，而无需首先进行防御性检查：它始终是一个函数。请确保您不会与Objectprop的默认值混淆，这将是一个空对象：
props: {
someObject: {
type: Object
default: () => ({})
}
}
In Vue, Objectand Arrayprops 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 Functionprops, but docs indeed aren't crystal clear about this).
在Vue公司，Object和Array道具必须将其默认值函数的返回，以确保它们是不同的组件的每个实例（这似乎并不需要为Function道具，但实际上文档不清澈的这个）。
回答by Tamer A. El Sayed
This way should work with Vue 2.0
这种方式应该适用于 Vue 2.0
props: {
clickFunction: {
type: 'Function'
default(){
return () => true
}
}
}
回答by Arthur Shlain
Example with parameter:
带参数的示例：
responseFunc: {
type: Function,
default: (response) => {
return response.data;
}
}
回答by Marcin Zawada
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.
我认为这不是正确的方法。VUE 不会那样工作。为什么要将引用传递给函数作为道具？组件可以发出自己的事件，父级可以捕获。
Here you have available props types: https://vuejs.org/v2/guide/components-props.html
这里有可用的道具类型：https: //vuejs.org/v2/guide/components-props.html
And here you can read about cutom events: https://vuejs.org/v2/guide/components-custom-events.html#Event-Names
在这里你可以阅读关于自定义事件：https://vuejs.org/v2/guide/components-custom-events.html#Event-Names
EditYeah, 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).
编辑是的，我的答案不正确，也没有回答问题。直接回答：是的，有一些方法可以为具有函数类型的 prop 设置默认函数（查看其他答案）。
Patterns and use-cases are off-topic so I end here (however, someone mentioned an interesting thing in response to my answer).
模式和用例是题外话，所以我到这里结束（但是，有人在回答我的回答时提到了一件有趣的事情）。
