自定义道具类型Vue.js

Question

有没有办法为Vue.js道具创建自定义道具类型(并通过验证扩展它)？

在下面的例子中,您将找到Object prop background.我希望有一个自定义道具类型Image,而不是Object.图像将检查src和alt填充,其余部分将是可选的.

我们现在拥有的:

export default {
  props: {
    background: {
      type: Object,
      src: String,
      srcset: String,
      alt: String,
      title: String,
    },
  },
};

我想要的是:

class customPropImage {
  // magic ...
}

export default {
  props: {
    background: Image,
  },
};

Answer 1

当然你可以做到.根据Vue文档,您可以将类型设置为自定义类型的构造函数.使用自定义验证,它可能看起来像这样:

function CustomImage () {
  // Magic
}

Vue.component('blog-post', {
  props: {
    myImage: {
      type: CustomImage,
      validator: function (value) {
        return true; // or false based on value of myImage
      }
    }
  }
})

这是codeandbox的一个例子