Question

所有Vue组件之一的属性都是必需的，并键入Array。

    props: {
        completed: {
            type: Array,
            required: true
        },
        remaining: {
            type: Array,
            required: true
        },
        todos: {
            type: Array,
            required: true
        }
    }

只有三个道具，但是如果有更多的道具，我将不得不为所有道具重复代码。有没有办法设置所有需要的道具并键入Array？

props: {
     // the following code should be equivalent to the previous one
     completed, remaining, todos: {
          required: true,
          type: Array
     }
}

显然，上面的代码不起作用，因为这不是JS对象的工作原理。

我想到的最好的是：

    // at the beginning of the code
    let params = {type: Array, required:true};

    // ...
    // in the object
    props: {
        completed: params,
        remaining: params,
        todos: params
    }

有什么方法可以提高效率？我只是在寻找一种捷径，因为我经常发现有一些方法可以使代码更清洁，更高效，直到我询问时才知道。

Answer 1

您绝对不应该这样做，但是这是您可以通过spread syntax

实现的方法

const component = {
  props: {
     ...['completed', 'remaining', 'todos'].reduce((obj, key) => (obj[key] = {              
          required: true,
          type: Array
        }, obj), {}),
  }
}

console.log(component)

还可以检出：

您也可以创建一个辅助函数：

const component = {
  props: {
    ...myProps(['completed', 'remaining', 'todos'], Array, true)
  },
}

console.log(component)


function myProps(arr, type, required) {
  return arr.reduce((obj, key) => (obj[key] = { required, type }, obj), {})
}

定义VUE道具的默认类型和默认值

1 个答案: