Vue的prop属性

2022-05-04 12:00:22 阅读：151 来源： 互联网

标签：Vue default 校验 prop props 组件 type 属性

在Vue中，父子组件的关系可以总结为propsDown，eventsUp。父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。

在这里插入图片描述

prop的作用就是父组件向子组件单向传递数据，该过程是单向的，传递的属性可以是静态的，也可以是动态的，可以是数字、字符串、数组、对象以及校验函数进行校验。
所有的prop都使得其父子组件之间形成了一个单向下行绑定：父组件的prop的更新会向下流动到子组件中，但反过来不行，这样就会防止从子组件意外改变父组件以及同级子组件的状态，从而导致应用的数据流难以理解。
每次父组件发生更新时，子组件中所有的prop都将刷新为最新的值，意味着不能在子组件内部改变prop，这样的话Vue会在控制台抛出一个警告。
一般子组件想要操作prop中的值，需要将prop中的值赋值给本地定义的属性，且将prop作为初始值。
当prop传入之后需要进行转换时，可以使用computed来进行定义。
子组件用props接收父组件传来的消息由多种形式：
- 数组形式 props:[data1,data2] 直接接收消息，不做任何校验，不建议使用
- 简单对象形式 props:{ data1:String , data2: Array } 进行了类型校验，若类型不一致，控制台会报错。
- 复杂对象形式
  - ```
  props: {
    data1: {
      type: String,
      required: true,
      default: 'default value',
      validator (value) {
        return (value.length < 5)
      }
    },
    data2: {
      type: Array,
      required: true,
      default: () => ['', '', '']
    }
  }
```
- 复杂对象形式的情况下，作为对象属性的参数可以写为对象形式，参数对象含有4个属性，type、required、default、validator。
- type:设定参数类型，当传入参数类型与type不相符时，控制台会报错
- required:设定参数是否为必传，当设为true时，不传该参数会报错
- default:设置默认值，当参数类型为复杂类型时，需要使用工厂模式生成默认值，否则vue会在控制台抛出警告。
- validator:校验器，一个函数，拥有一个代表传入值的形参，可以自定义各种校验，当返回false时，会报错，表示校验未通过。

标签：Vue,default,校验,prop,props,组件,type,属性
来源： https://www.cnblogs.com/cheyunhua/p/16220734.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue的prop属性