错误信息。 “对象/数组类型的道具必须使用工厂函数来返回默认值。”

Question

我正在使用 Vue-Cli3.0。 我在 Vue.js 中使用了这个模块。 https://github.com/holiber/sl-vue-tree

这是一个可自定义的 Vue.js 可拖动树组件，但我发现它无法复制对象的功能。

https://github.com/holiber/sl-vue-tree/blob/master/src/sl-vue-tree.js#L715

因为这里。

JSON.parse(JSON.stringify(entity))

所以我使用了这个模块并编辑了复制功能。

https://www.npmjs.com/package/clone

var clone = require('clone');

copy(entity) {
    return clone(entity)
},

这样，对象的功能就被正确复制了。

我已经测试过了，它工作正常。 性能没有问题，但出现控制台错误。

[Vue warn]: Invalid default value for prop "multiselectKey": Props with type Object/Array must use a factory function to return the default value.

found in

---> <SlVueTree> 

我想知道消除这个错误的方法。 感谢您阅读我的问题。

Answer 1

props 中的工厂函数如下所示：

props: {
    exampleDefaultObject: {
        type: Object,
        default() {
            return {}
        }
    },
    exampleDefaultArray: {
        type: Array,
        default() {
            return []
        }
    }
},

或在 ES6 中：

props: {
    exampleDefaultObject: {
        type: Object,
        default: () => ({})
    },
    exampleDefaultArray: {
        type: Array,
        default: () => []
    }
},

（对于来这里寻找问题“类型为对象/数组的道具必须使用工厂函数来返回默认值”中的错误的解释的人）

请注意，在 es6 箭头函数中返回对象时，需要括号： () => ({})而不是() => {}

Answer 2

根据您的控制台警告，我发现了错误

https://github.com/holiber/sl-vue-tree/blob/master/src/sl-vue-tree.js#L30

尝试像这样修复它：

multiselectKey: {
  type: [String, Array],
  default: function () {
    return ['ctrlKey', 'metaKey']
  },
  validator: function (value) {
    let allowedKeys = ['ctrlKey', 'metaKey', 'altKey'];
    let multiselectKeys = Array.isArray(value) ? value : [value];
    multiselectKeys = multiselectKeys.filter(keyName => allowedKeys.indexOf(keyName ) !== -1);
    return !!multiselectKeys.length;
  }
},

组件默认值必须使用工厂函数返回！

试试看，希望它可以帮助你

Answer 3

这些情况需要一个函数而不是产生默认值，而不是一个对象或数组：

obj_param:{
        type:Object,
        default:()=>{}
},
array_param:{
        type:Array,
        default:()=>[]
},

这是出于性能原因，因为仅在需要时才调用该函数（没有值，因此使用默认值），而每次使用组件时都会实例化直接值

Answer 4

在我的类组件中的 TS 格式中，我类似地使用了它，如下所示。 它解决了我的错误。 感谢Trick & Katinka提供上述解决方案！

@Prop({default(){return []}}) private markerList!: Array<markerType>;