

首页  思维导图  详情



14、组件信息通讯父传子——props属性传递

2022-04-01 12:37:31   0  举报





AI智能生成

vue

前端开发

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

 Collect

Get Started

17、组件信息通讯——EventBus

 Collect

Get Started

ER-父类型统计

 Collect

Get Started

选择属性映射

 Collect

Get Started

19、组件信息通讯——ref、parent、children





0 条评论

下一页