vue props组件传值时的类型及写法，data箭头函数的写法

痛定思痛。 2022-09-11 07:12 527阅读 0赞

## props的属性： ##

type
        type:(规定数据类型) 可以是下列原生构造函数中的一个：
    　　    String 字符串
    　　    Number 数字
    　　    Boolean 布尔
    　　    Array 数组 
    　　    Object 对象
    　　    Date 日期
    　　    Function 函数
    　　    Symbol 独一无二的值(es6)
    
            // 额外的，type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。例如，给定下列现成的构造函数：
            function Person (firstName, lastName) {
              this.firstName = firstName
              this.lastName = lastName
            }
    
    default
    　　default : (默认值)
    　　基础数据类型: 直接赋值
    　　对象数据类型: 用函数赋值 ()=>[]
        1、使用default定义默认值时，如果父组件有传值，则用父值渲染。如果父组件没有传值，则使用默认值。
        2、没有定义默认值时，如果父组件有传值，则用父值渲染。如果父组件没有传值，则使用的是该类型的默认值。类型及其默
        认值如下：
            String ''
            Number 0
            Array []
            Object {}
    
    required
    　　required: (必填项)
    　　默认为false,说明父级必须传入,否则会报错
    validator
    　　validator: 校验(验证传入的值是否符合规定)

## props各种的写法： ##

### // 方法1:对象语法 ###

Vue.component('my-component', {
      props: {
        // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    
    /*********** 正常写法*****************/
    
    /**字符串**********************/
        propA: {
          type: String,
          required: true,// 必填的字符串      
        },
    
    /**数字**********************/
        propB: {
          type: Number,
          default: 100 // 带有默认值的数字
        },
        propBB: Number,
    
        propC: {
          type: Boolean,
          default: false // 带有默认值的boolean
        },
    
    /**数组**********************/
        propD: {
          type: Array,
          // 对象或数组默认值必须从一个工厂函数获取
          default: function () {
            return ['张三']
          }
        },
        // 箭头函数写法
        propDD: {
          type: Array,
          default: () => ['张三'],//default: () => {return ['张三']}
        },
    
    /**对象**********************/
        propE: {
          type: Object,
          // 对象或数组默认值必须从一个工厂函数获取
          default: function () {
            return { message: 'hello' }// 带有默认值的对象
          }
        },
        // 箭头函数写法
        propEE: {
          type: Object,
          default: () => ({ message: 'hello' }) //default:()=>{return{message: 'hello'};}
        },
        // 错误写法propEE: () => {}
    
    /**函数**********************/
        propF: {
    		type: Function,
    		default: function() {
    			return function() {}
    		}
    	}
        propFF: {
            type: Function,
            default: (res) => {
            return {
              res: ''
            }
          }    
        }
    
        propFFF:Function
    
    /**自定义验证函数**********************/
        propG: {
          type:String,
              
          validator: function (value) {
            // 这个值必须匹配下列字符串中的一个
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
          }
        },
    
        // 多个可能的类型
        propI: [String, Number],
    
        propII:{
          // vue props type设置多个类型
          type: Number | null,
          required: true
        }
    
        propIII:{
          // vue props type设置多个类型
          type: [Number, String, Object],
          required: true
        }
        
    
        // 引用自定义构造函数
        author: Person
      }
    })

### // 方法2：数组语法 ###

props:['xxx','xxxxx'] 不限制数据类型

## **data各种的写法：** ##

data: () => ({
          yenSymbol: '\u00A5'
        }),