Vue2&3-props配置功能

Vue2&3-props配置功能

Vue2-props配置

• 功能：接收从其他组件传过来的数据，将数据从静态转为动态
• 注意：
  • 同一层组件不能使用props，必须是父组件传子组件的形式。父组件传数据，子组件接收数据。
  • 不能什么数据都接收，可能会出现一些奇怪的bug
  • props接收过来的数据不要修改，页面渲染可能没有问题，但控制台会报错，而且不符合规范

props的三种接收方法：

• 第一种：数组形式（常用）

props:['a', 'b']

• 第二种：类型限制

props : {
   
    
    a : String 
    b : Number 
}

• 第三种：类型限制，必要性限制，默认值

props : {
   
    
    a : {
   
   
        // type:类型（可以是数字，字符串等）
        type : Number, 
        // required：true 或者 false
        // 设置为true视为a必须存在（必填项），没有a则控制台报错
        // 默认情况为false 
        required : true 
    }, 
    b : {
   
    
        type : Number, 
        // default：默认值
        // 在添加默认值之前该字段接收的数据已经有数值时，则默认值无效
        default : 10 
    }
}

传数据的形式（传数据的形式可对应任意一种接受数据的方法）：

• 在标签内传数据

// 父组件
<Info name="张三" :age="12"></Info>

// 子组件
props : ['name', 'age']

• 在data(){}中传数据

// 父组件
<Info :list="list