Question

是否可以通过功能类型为prop设置默认功能？

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道具必须由函数返回其默认值，以确保它们对于组件的每个实例都是不同的（{{1似乎并不需要}}道具，但文档确实对此一无所知。

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

在这里您可以了解有关cutom事件的信息： https://vuejs.org/v2/guide/components-custom-events.html#Event-Names

Vue：prop函数的默认值

5 个答案: