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