vue props自定义函数validator

2020-11-26 08:47:53

用于接收来自父组件的数据(子组件期待获得的数据)

类型:字符串数组或者object

validator自定义函数

props: {// 基础的类型检查 (`null` 匹配任何类型)propA: Number,// 多个可能的类型propB: [String, Number],// 必填的字符串propC: {type: String,required: true},// 带有默认值的数字propD: {type: Number,default: 100},// 带有默认值的对象propE: {type: Object,// 对象或数组且一定会从一个工厂函数返回默认值default: function () {return { message: 'hello' }}},// 自定义验证函数propF: {type: String,validator: function (t) {// 这个值必须匹配下列字符串中的一个return t === 'fade' || t === 'slide'},defalut:'slide'}

 数组:props: ['size', 'myMessage']
对象
 props: {
    // 只检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }

    }
  }

HTML 特性是不区分大小写的。所以,当使用的不是字符串模板,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名:

父组件:

  1. <!-- kebab-case in HTML -->

  2. <child my-message="hello!"></child>

子组件:

// camelCase in JavaScript

props: ['myMessage'],

#动态Prop

要动态地绑定父组件的数据到子模板的 props需要使用v-bind,这样每当父组件的数据变化时,该变化也会传导给子组件。

#字面量语法vs动态语法 

(字面量分为字符串字面量(string literal )、数组字面量(array literal)和对象字面量(object literal),另外还有函数字面量(function literal)。)

父组件:

<!-- 传递了一个字符串 "1" -->

<comp some-prop="1"></comp>

=右边是字符串”1”而不是number。如果想要传递一个number,需要使用v-bind,从而让它的值被当作js表达式计算

<!-- 传递实际的 number -->

<comp v-bind:some-prop="1"></comp>

Prop中的数据

.prop 作为初始值传入后,子组件想把它当作局部数据来用;定义一个局部变量,并用 prop 的值初始化它:

子组件:

props: ['initialCounter'],

data: function () {

return { counter: this.initialCounter }

}

 2.prop 作为初始值传入,由子组件处理成其它数据输出。
定义一个计算属性,处理 prop 的值并返回。

子组件:

props: ['size'],

computed: {

normalizedSize: function () {

return this.size.trim().toLowerCase()

}

}

注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

#prop验证

子组件:

props: {

// 基础类型检测 (`null` 意思是任何类型都可以)

propA: Number,

// 多种类型

propB: [String, Number],

// 必传且是字符串

propC: {

type: String,

required: true

},

// 数字,有默认值

propD: {

 type: Number,

 default: 100

},

// 数组/对象的默认值应当由一个工厂函数返回

propE: {

 type: Object,

 default: function () {

  return { message: 'hello' }

 }

},

// 自定义验证函数

propF: {

 validator: function (value) {

 return value > 10

 }

 }

}

注意 props 会在组件实例创建之前进行校验,所以在 default 或 validator 函数里,诸如 data、computed 或 methods 等实例属性还无法使用。

 

#非父子组件通信

有时候两个组件也需要通信 (非父子关系)。在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线:

 

var bus = new Vue()
// 触发组件 A 中的事件bus.$emit('id-selected', 1)// 在组件 B 创建的钩子中监听事件bus.$on('id-selected', function (id) {// ...})


  • 2019-08-22 13:35:27

    Generator函数的语法

    执行Generator函数会返回一个遍历器对象,也就是说,Generator函数除了是状态机还是一个遍历器对象生成函数。 返回遍历器对象,可以依次遍历Generator函数内部的每一个状态。

  • 2019-08-22 16:38:15

    理解JS原型对象与原型链(重要清晰)

    JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象对应拥有一个原型,对象以其原型为模板、从原型继承方法和属性。而同时原型也是对象,它也拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链 (prototype chain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

  • 2019-08-22 17:26:21

    详解javaScript的深拷贝

    最开始意识到深拷贝的重要性是在我使用redux的时候(react + redux), redux的机制要求在reducer中必须返回一个新的对象,而不能对原来的对象做改动,事实上,当时我当然不会主动犯这个错误,但很多时候,一不小心可能就会修改了原来的对象,例如:var newObj = obj; newObj.xxx = xxx 实际上,这个时候newObj和obj两个引用指向的是同一个对象,我修改了newObj,实际上也就等同于修改了obj,这,就是我和深浅拷贝的第一次相遇。

  • 2019-08-22 19:14:21

    Android Studio 3.5最新特性

    Android Studio(以下简称为AS) 3.5正式版终于发布了,从第一个bate版本发布到正式版本,历时三个半月。AS一直以来被开发者吐槽,因此谷歌也放慢了版本的变化,对测试版本进行大力度的优化,提高了稳定性。从3.3版本开始,谷歌启动了名为Project Marble的计划,意为谷歌团队致力于使集成开发环境(IDE)的基本功能和流程变得坚如磐石,同时精炼和完善面向用户的功能。而AS 3.5则是Project Marble主要成果的版本,下面来介绍主要成果。

  • 2019-08-27 05:43:13

    Laravel 门面自动补全工具 laravel-ide-helper

    当我们在 PhpStorm 编辑器中,开发 Laravel 框架的项目时,很多类方法都不能自动补全和定位,比如 Facade 门面的方法,DB::table()、Route::get() 等。