错误信息."具有Object/Array类型的道具必须使用工厂函数来返回默认值."

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

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

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

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

Answer 3

根据你的控制台警告,我发现错误

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;
  }
},

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

尝试它,希望它可以帮助你