本网站三天换一次域名,网站开发税率税种,浙江网站建设品牌设计,网站建设与管理实践收获怎么写校验vue prop的几种方式
vue 要求将传递给组件的任何数据显式声明为 props。此外#xff0c;它还提供了强大的内置机制来验证该数据。这充当组件和父级组件之间的约定#xff0c;并确保组件能按预期使用。
让我们看看怎么对props进行校验。它可以帮助我们在开发和调试过程中…校验vue prop的几种方式
vue 要求将传递给组件的任何数据显式声明为 props。此外它还提供了强大的内置机制来验证该数据。这充当组件和父级组件之间的约定并确保组件能按预期使用。
让我们看看怎么对props进行校验。它可以帮助我们在开发和调试过程中减少错误并提高整体代码质量。
基础
原始类型
验证基本类型就像将类型选项设置为基本类型构造函数一样简单。
script langts
import Vue, { PropType } from vue
enum Position {TOP top,RIGHT right,BOTTOM bottom,LEFT left,
}
export default {props: {position: {type: String as PropTypePosition,default: Position.BOTTOM,},},
};
/script复杂类型
复杂类型也可以用同样的方式进行验证。
export default {props: {// 带有默认值的对象propE: {type: Object,default(rawProps) {return { message: hello }}},// 带有默认值的数组propF: {type: Array,default() {return []}},// 带有默认值的函数propG: {type: Function,default() {return Default function}}}
}type可以是以下几个值
NumberStringBooleanArrayObjectDateFunctionSymbol
此外type还可以是自定义类或构造函数并且将通过instanceof检查进行断言。例如给定以下类
class Person {constructor(firstName, lastName) {this.firstName firstNamethis.lastName lastName}
}我们同样可以把Person用作 prop 类型
export default {props: {author: Person}
}高级验证
验证器功能
Props 支持验证器函数的使用。该函数接受 prop 的原始值并且必须返回一个布尔值来确定该 prop 是否有效
export default {prop: {validator(value) {return [success, warning, danger].includes(value)}},
}使用枚举
有时我们想将值缩小到一个特定的集合这可以通过伪造一个枚举来完成如下所示
export const Position Object.freeze({TOP: top,RIGHT: right,BOTTOM: bottom,LEFT: left
});它可以在验证器中导入和使用也可以作为默认值。
templatespan :classarrow-position--${position}{{ position }}/span
/templatescript
import { Position } from ./types;
export default {props: {position: {validator(value) {return Object.values(Position).includes(value);},default: Position.BOTTOM,},},
};
/script最后父组件还可以导入并使用此枚举从而消除我们应用程序中魔术字符串的使用。
templateDropDownComponent :positionPosition.BOTTOM /
/templatescript
import DropDownComponent from ./components/DropDownComponent.vue;
import { Position } from ./components/types;
export default {components: {DropDownComponent,},data() {return {Position,};},
};
/script布尔转换
布尔属性具有独特的行为。属性的存在与否可以决定 prop 的值。
!-- 相当于 :disabledtrue --
MyComponent disabled /!-- 相当于 :disabledfalse --
MyComponent /TypeScript
将 Vue 的内置 prop 验证与 TypeScript 相结合可以让我们更好地控制这种机制因为 TypeScript 本身支持接口和枚举。
Interfaces
我们可以使用interface和PropType来定义复杂的 prop 类型。这确保了传递的对象将具有特定的结构。
script langts
import Vue, { PropType } from vue
interface Book {title: stringauthor: stringyear: number
}
const Component Vue.extend({props: {book: {type: Object as PropTypeBook,required: true,validator (book: Book) {return !!book.title;}}}
})
/script真正的枚举
前面我们已经讲解过如何在 Javascript 中伪造枚举。TypeScript 不需要这样做因为原生支持枚举。
script langts
import Vue, { PropType } from vue
interface Book {title: stringauthor: stringyear: number
}
const Component Vue.extend({props: {book: {type: Object as PropTypeBook,required: true,validator (book: Book) {return !!book.title;}}}
})
/scriptvue3
当在vue3使用带有 Options 或 Composition API 时上述所有内容均有效。不同之处在于在script setup使用Props 时必须使用defineProps()进行声明:
script setup
const props defineProps([foo])
console.log(props.foo)
/scriptscript setup
defineProps({title: String,likes: Number
})
/script或者当使用 TypeScript 时在script setup可以使用纯类型注释来声明 props
script setup langts
defineProps{title?: stringlikes?: number
}()
/script或者使用interface
script setup langts
interface Props {foo: stringbar?: number
}
const props definePropsProps()
/script最后在使用基于类型的声明时声明默认值
script setup langts
interface Props {foo: stringbar?: number
}
const { foo, bar 100 } definePropsProps()
/script
