快应用---Props

一.Props

     1)Prop属性名称使用驼峰命名法,在外部传递数据时请转化为kebab-case(短横线分隔命名)propObject转换为prop-object;

      2)属性默认值:子组件声明属性时,可设置默认值。当调用子组件没有传入该数据时,将会自动设为默认值。

如果需要设置默认值,props属性的写法必须要写成Object形式,不能写成Array形式;

        例如:props:{

                        prop1:{

                             default:'hello' //默认值

                         },

                        prop2Object:{} //不能设置默认值

                   }

        3)数据单向性

              父子间的数据传输是单向性的,父组件prop数据更新,子组件的数据会刷新为最新值;子组件的prop值发生变化,并不会改变父组件中值。

               但是 prop类型是数组或对象,子组件变化会影响到父组件的值,这意味着你不应该在一个子组件内部改变prop的值,这是危险性操作;

             常见的三种操作prop值的方法:

              1.将prop传入值作为初始值,用data接收

               props:['say','propObject'],

               data(){

                     return {

                           obj: this.propObject.count

                      }

               }

               提示:如果你想用data直接接收propObject这个对象,可以采用JSON.parse(JSON.stringify(propObject)),将prop深度克隆。

             2、$watch监控数据改变

              如果是监听对象中的属性,参数请使用 . 分隔,如:$watch(xxx.xxx.xxx,methodName);

              onInit(){

                   //监听数据变化

                   this.$watch('propsay','watchPropsChange');

             }

              //监听数据变化,可以对数据处理后,设置到data上;

              watchPropsChange(newV,oldV){

                    console.info(`监听数据变化:`newV,oldV);

                    this.propSay = newV && newV.toUpperCase()

              }

              3、computed属性 1050+版本

                   computed:{

                       obj(){

                            return this.say.toUpperCase()

                       }

                   }

                 属性校验:子组件声明属性时,可以指定校验规格;如果传入的数据不符合规格,devtool会发出警告。当组件给其他开发者使用时,这将很有用处;

                 校验方式包括必填项检查,类型检查和函数检查。验证顺序: 必填项检查---> 类型检查 ---->函数检查;如有警告,仅报告最前置的检查项目。

                  类型检查支持额类型包括【String、Number、Boolean、Function、Object、Array 】

                  如果需要设置验证规格,props属性的写法必须要写成Object形式,不能写成Array形式。

                 例如:

                       props:{

                            props:Number,//仅类型检查

                            prop2Object:{

                                  type:String,

                                  required: true,//必填项

                                  validator: function(value){

                                        //函数检查

                                        return ['success','warning','danger'].indexOf(value)!==-1

                                  }

                            }

                        }

猜你喜欢

转载自www.cnblogs.com/sunqq/p/11208697.html