zoukankan      html  css  js  c++  java
  • 快应用---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

                                      }

                                }

                            }

  • 相关阅读:
    过滤器解决乱码问题
    读取配置文件javase
    Django
    python之路
    最火的前端框架--Vue
    web前端
    MySQL笔记
    python 从想学到坚持
    python 坚持下来会更好
    简单的装系统大佬别喷谢谢拉 欢迎指出不足指出
  • 原文地址:https://www.cnblogs.com/sunqq/p/11208697.html
Copyright © 2011-2022 走看看