Vue-props配置功能

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"></Info>
data() {
    return {
        list : [
            {id:'001', name:'zhangsan', age:'10'},
            {id:'002', name:'lisi', age:'20'}
        ]
    }
}

// 子组件
props : ['list']

• 在methods : {}中传数据

// 父组件
<Info :list="list"></Info>
method : {
    list(){
        ......
    }
}

// 子组件
props : ['list']

• 注：传数据的形式有很多，不局限以上用法，也可以在computed : {}中传数据等

怎么用？

• 父组件传数据，子组件接收数据
• 父组件App.vue

<template>
    <div>
        <h1>{{msg}}</h1>
        // 当出现第二 或 第三种带有限定类型的props时，要注意接受的数据是否符合类型限制
        // 不符合类型限制，但又不想修改类型，例如：age="12"，可采用v-bind:
        // v-bind:简写形式 => ':'，等号后面可以是常量或字符串等
        <Info name="张三" :age="12"></Info>
    </div>
</template>

<script>
    import Info from './components/Info.vue'
    export default {
        name : 'App',
        data() {
            return {
                msg : '个人信息'
            }
        },
        components : {Info}
    }
</script>

• 子组件Info.vue

<template>
    <div>
        <h3>姓名：{{name}}</h3>
        <h3>年龄：{{age}}</h3>
    </div>
</template>

<script>
export default {
    name : 'Info',
    data() {
        return {
            name: this.name
        }
    },
    // 数组形式（常用）
    props : ['name','age']
    
    // 带有类型限定
    props : { 
        name : String 
        age : Number 
    }
    
    // 类型限制，必要性限制，默认值
    props : { 
        name : {
            type : Number, 
            required : true 
        },
        age : { 
            type : Number, 
            default : 10 
        }
    }
}
</script>
   type : Number, 
            required : true 
        },
        age : { 
            type : Number, 
            default : 10 
        }
    }
}
</script>