自定义道具类型 Vue.js

Posted 2023-02-23

【中文标题】自定义道具类型 Vue.js

【英文标题】：Custom prop type 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,
  ,
;

【参考方案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)
    ,
)