javascript - 是否有可能需要 Vue 组件的许多 Prop 之一？

Question

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

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

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

我如何才能让这个组件按要求接受一个 url 或一段文本？

奖励:我要怎么做才能让组件只能带一个？即，如果同时传入 URL 和文本，则失败。

Answer 1

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

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] !== '';
    }
  }
}