快应用---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

                                  }

                            }

                        }