vue.js --prop、prop的验证和prop的注意事项

╰+哭是因爲堅強的太久メ 2023-02-18 14:07 58阅读 0赞

1、prop的验证(我就直接从官网复制了)

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定 对HTML 中的 attribute名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。
这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

1、以数组的形式

  1. prop:['name','age'];

2、以对象的形式

  1. prop:{
  2. name:{
  3. type:String,
  4. default:''
  5. },
  6. age:{
  7. type:Number,
  8. default:18,
  9. }
  10. }

JavaScript 的模板字符串来让多行的模板更易读。它们在 IE 下并没有被支持,所以如果你需要在不 (经过 Babel 或 TypeScript 之类的工具) 编译的情况下支持 IE,请使用折行转义字符取而代之

折行转义字符?

折行转义字符

  1. Vue.component('my-component', {
  2. props: {
  3. // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
  4. propA: Number,
  5. // 多个可能的类型
  6. propB: [String, Number],
  7. // 必填的字符串
  8. propC: {
  9. type: String,
  10. required: true
  11. },
  12. // 带有默认值的数字
  13. propD: {
  14. type: Number,
  15. default: 100
  16. },
  17. // 带有默认值的对象
  18. propE: {
  19. type: Object,
  20. // 对象或数组默认值必须从一个工厂函数获取
  21. default: function () {
  22. return { message: 'hello' }
  23. }
  24. },
  25. // 自定义验证函数
  26. propF: {
  27. validator: function (value) {
  28. // 这个值必须匹配下列字符串中的一个
  29. return ['success', 'warning', 'danger'].indexOf(value) !== -1
  30. }
  31. }
  32. }
  33. })

注意以下:

1、prop验证失败的时候,(开发版本的vue)构建的项目会发出警告;
2、prop的验证会在vue实例创建之前就开始了,所以,在prop中不能书写以下属性:data、computed、methods在default 或 validator 函数中是不可用的

2、类型检查

那么type有哪些?8种

String
Object
Array
Number
Symbol
Boolean
Date
Function
type 还可以是一个自定义的构造函数,并且通过 instanceof 来进行检查确认

  1. function Person (firstName, lastName) {
  2. this.firstName = firstName
  3. this.lastName = lastName
  4. }

验证 author prop 的值是否是通过 new Person 创建的。

  1. Vue.component('blog-post', {
  2. props: {
  3. author: Person
  4. }
  5. })

发表评论

表情:
评论列表 (有 0 条评论,58人围观)

还没有评论,来说两句吧...

相关阅读