Vue组件是否可能需要许多道具之一？答案

【问题标题】：Is it possible to require one of many props for Vue component?Vue组件是否可能需要许多道具之一？
【发布时间】：2020-06-19 14:37:01
【问题描述】：

我正在开发一个必须接受一段文本或一个链接的 Vue 组件。当有一个链接传入时，我想创建一个锚标记，当输入一段文本时，我想创建一个跨度。我目前的问题是每个 Vue 道具都有自己的验证器，即

    url: {
      type: String,
      required: true
    },
    text: {
      type: String
    }

上面的代码不能满足我的需求，因为它需要 url，如果传递了文本，我希望这是可选的。

我将如何做到这一点，以便该组件根据要求接收一个 url 或一段文本？

奖励：我将如何制作以使组件只能使用一个？即如果 URL 和文本都传入，则失败。

【问题讨论】：

使用带有验证器的单个道具是否适合您的需求？
您可以使用computed进行验证。
这很有趣，您是否建议使用基于文本格式的计算值，有点像使用正则表达式来确定传入的文本是否是链接？
我支持@Simon 所说的。您的思维方式非常困难，有时可能是不必要的。
@Turna 为什么不简单地使用道具验证器？由于只有 url 或文本，我将使用单个 value 道具，然后添加（如果需要）一个计算值，该值将返回类型，具体取决于它应该如何使用.如果我知道 url 或 text 之间的使用有什么区别，我可以做出更好的解决方案

标签： javascript vue.js

【解决方案1】：

确实，prop 验证器必须是纯函数，因为它们无法访问组件的 THIS。但是您可以通过使用 Object 类型的单个道具来解决您的问题：

props:
{
  params:
  {
    type: Object,
    validator: (value) =>
    {
      return !!value && 
        Object.keys(value).length === 1 && 
        ['url', 'text'].includes(Object.keys) && 
        typeof Object.values(value)[0] === 'string' &&
        Object.values(value)[0] !== '';
    }
  }
}

【讨论】：