14、组件信息通讯父传子——props属性传递
2022-04-01 12:37:31 0 举报AI智能生成
vue
作者其他创作
大纲/内容
定义
在父组件中调用子组件，想让子组件中具备不同的信息（每个子组件都是单独的实例）
=>“父传子”：基于PROP属性来完成的
直接写在组件标签上的 就叫做传给当前子组件的属性
想让两个组件中的信息不同，可以通过属性值不同来完成
例如
<my-vote title="支持张三是女孩？" :supnum="10" :oppnum="15"></my-vote>
<my-vote title="支持李四是男孩？"></my-vote>
图例
属性规范
1.属性传递的时候，属性名尽可能不要出现大写（因为你设置为大写，最后也是基于小写传递的）
supNum => supnum
2.传递的属性名设置为kabab-case模式，在子组件注册用的是 camalCase/PasalCase 来注册接收
sup-num => supNum/SupNum
3.传递的属性值默认都是字符串，如果需要传递其它数据类型值，我们需要基于v-bind处理
=> :supnum="10"
这样传递过去的就是Number类型
操作步骤
1、在父组件调用到的时候，给组件传递属性
<my-vote title="支持张三是女孩？" :supnum="10" :oppnum="15"></my-vote>
2、子组件想要用父组件传递的属性，需要注册一下
props: ["title", "oppnum"]
这里只注册需要用到的属性即可
注意
注册完成后，会把当前属性挂载到（当前组件的）实例上
获取这个值的方法
{{title}} / this.title
基于父组件传递给子组件的属性值是不建议去直接修改操作的
因为通过子组件修改的值，会被下次父组件重新渲染时传递的属性覆盖掉
所以
子组件内部 接收到的属性值 可以理解为是只读的
（项目中我们可以把获取的属性值再赋值给组件的 DATA/COMPUTED，操作都是按照DATA来操作）
把属性信息挂载到DATA上，一定要记住属性信息此时也在实例上挂载了，DATA信息也会挂载到实例上，所以名字不能一致
调用组件的时候如果设置的属性是class/style这类样式属性，VUE会默认帮我们把样式和组件的样式进行合并处理
props属性校验
在子组件中进行
属性注册时候的校验规则
（即使校验失败，组件还会正常的渲染，只不过控制台会有错误信息提示）
指定属性的类型
props:{xxx:String,…}
指定属性的默认值
props:{xxx:{type:String,default:’xxx’,required:true}}
注意
1、type如果是一个数组，意为指定的多类型皆可以
2、default可以是一个函数，函数返回值是默认值
3、required:true 设置当前项为必传项
validator自定义验证规则函数
实参
函数的实参接收的是当前属性的值
返回值
必须符合函数中指定的规则，返回true/false
0 条评论
下一页
