自定义道具类型 Vue.js答案

【问题标题】：Custom prop type Vue.js自定义道具类型 Vue.js
【发布时间】：2019-04-05 08:34:03
【问题描述】：

有没有办法为 Vue.js 道具创建自定义道具类型（并通过验证对其进行扩展）？

在下面的示例中，您将找到 Object 属性 background。而不是一个对象，我想有一个自定义的道具类型图像。图片将检查src 和alt 是否已填充，其余部分是可选的。

我们现在拥有的：

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

我想要什么：

class customPropImage {
  // magic ...
}

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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

当然可以。根据Vue documentation，您可以将类型设置为自定义类型的构造函数。使用自定义验证，它可能看起来像这样：

function CustomImage () {
  // Magic
}

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

这是example on codesandbox

【讨论】：

是否也可以在函数中编写验证规则？已经尝试过了，但似乎无法正常工作。
显然，我可以在我的自定义道具类型旁边编写一个自定义验证器。感谢您的澄清！
乐于助人:)
来自你提到的Vue文档：'另外，type也可以是自定义构造函数'。那里提供的示例是：function Person (firstName, lastName) { this.firstName = firstName this.lastName = lastName } .. 现在从 CustomImage.js 中的代码框，它有：export default class CustomImage { constructor(src) { ...... }}。如果没有 constructor 函数，codeandbox 不会显示图像，而在文档示例中不存在这样的 constructor 函数，尽管那里的描述说使用这样的函数。你能解释一下整个场景吗？
在codesandbox中，在App.vue中，它在data里面有profileImage属性。在blogPost.vue 中，它有<img :src="myImage.src"/>。 JS 中的 myImage 属性指定了类型和验证器，据说不是任何值。那么myImage.src 是如何获得它的价值的呢？

【解决方案2】：

在 Vue2 中输入的自定义道具

唯一适合我的解决方案是使用 @vue/composition-api。

/* eslint-disable @typescript-eslint/no-empty-interface */
import { defineComponent } from '@vue/composition-api'
import { IAddress } from '@/types'

interface Props {
    address: IAddress
    title: string
}

declare module 'vue/types/vue' {
    interface Vue extends Props {}
}

export default defineComponent({
    props: {
        address: Object,
        title: String,
    },
    setup (props: Props) {
        const address = props.address
        console.log(address)
    },
})

【讨论】：