1 简介

　　props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项

2 一个简单示例

1）StudentComp.vue

<template>

    <div>

        <h1>{{stname}}</h1>

    </div>

</template>

<script>

    export default {

        name:'StudentComp',

        data(){

            return {

                stname:'学生' ,

　　　　　　　　　　age:18

            }

        }

    }

</script>

2）SchoolComp.vue

<template>

    <div>

        <h1 >{{schoolname}}</h1>

        <StudentComp></StudentComp>

    </div>

</template>

<script>

import StudentComp from './StudentComp'

    export default {

        name:'SchoolComp',

        data(){

            return {

                schoolname:'实验小学1'

            }

        },

        components:{

            StudentComp

        }

    }

</script>

<style>

</style>

3）app.vue

<template>

<div>

    <SchoolComp></SchoolComp>

</div>

</template>

<script>

import SchoolComp from './components/SchoolComp'

export default {

    name:'App',

    components:{

        SchoolComp

    }

}

</script>

页面效果

3 一个需求引出props

　　在上面示例的基础上，要求StudentComp组件里面的stname和age不是固定的，而是引用StudentComp组件的那个组件来决定值，这时候可以使用props属性

1）修改StudentComp.vue,添加props属性，去掉data里面的stname和age值

<template>

    <div>

        <h1>{{stname}}</h1>

        <h1>{{age}}</h1>

    </div>

</template>

<script>

    export default {

        name:'StudentComp',

        data(){

            return {

            }

        },

        props:['stname','age']

    }

</script>

2）修改SchoolComp.vue，在StudentComp 标签添加stname和age属性，就可以把值传到StudentComp里面去了

<template>

    <div>

        <h1 >{{schoolname}}</h1>

        <StudentComp stname="学生" age="18" ></StudentComp>

    </div>

</template>

<script>

import StudentComp from './StudentComp'

    export default {

        name:'SchoolComp',

        data(){

            return {

                schoolname:'实验小学1'

            }

        },

        components:{

            StudentComp

        }

    }

</script>

<style>

</style>

3）效果

4 props的三种写法

4.1 最简数组写法

　　只定义参数名

props:['stname','age']

4.2 对象写法

　　定义参数名和类型

　　props:{

　　　　stname:String,

　　　　age:number

}

4.3 完整写法

　　可定义类型，是否必传，默认值

props: {

            stname: {

                type: String,     // 类型

                required: true,// 必要性

                default: 'cess'// 默认值

            },

            age:{

                type: Number,     // 类型

                required: true,// 必要性

                default: 18// 默认值

            }

        }

5 关于非字符串类型传值的问题

1) StudentComp.vue

<template>

    <div>

        <h1>{{stname}}</h1>

        <h1>{{age}}</h1>

    </div>

</template>

<script>

    export default {

        name:'StudentComp',

        data(){

            return {

            }

        },

        props: {

            stname: {

                type: String,     // 类型

                required: true,// 必要性

                default: 'cess'// 默认值

            },

            age:{

                type: Number,     // 类型

                required: true,// 必要性

                default: 18// 默认值

            }

        }

    }

</script>

2) SchoolComp.vue

<template>

    <div>

        <h1 >{{schoolname}}</h1>

        <StudentComp stname="学生" age="18" ></StudentComp>

    </div>

</template>

<script>

import StudentComp from './StudentComp'

    export default {

        name:'SchoolComp',

        data(){

            return {

                schoolname:'实验小学1'

            }

        },

        components:{

            StudentComp

        }

    }

</script>

<style>

</style>

3)效果

　　发现{{age + 1}}在页面显示181，因为18它是字符串，age+1就是字符串拼接，就是181了

4 ）问题

　　发现控制台报错，因为SchoolComp.vue那里通过属性传值，age="18"，它会认为18是个字符串，页面就是181了

5）解决方案

　　通过v-bind来设置age属性 :age="18"，这样子，age属性里面的18会被按照表达式来解析，18就会作为数字了

 <StudentComp stname="学生" :age="18" ></StudentComp>

6）效果

6 props和data里面属性不允许重名

　　因为props和data里面的属性都会在组件对象上面，所以是不允许重名的

　　在StudentComp.vue的data里面加一个属性stname，启动报错

<template>

    <div>

        <h1>{{stname}}</h1>

        <h1>{{age + 1}}</h1>

    </div>

</template>

<script>

    export default {

        name:'StudentComp',

        data(){

            return {

               'stname':'小学生'

            }

        },

        props: {

            stname: {

                type: String,     // 类型

                required: true,// 必要性

                default: 'cess'// 默认值

            },

            age:{

                type: Number,     // 类型

                required: true,// 必要性

                default: 18// 默认值

            }

        }

    }

</script>

7 props里面的属性的值的修改

7.1 在StudentComp里面修改

　　添加一个按钮

　　点击事件中去修改age的值

<template>

    <div>

        <h1>{{stname}}</h1>

        <h1>{{age + 1}}</h1>

        <button v-on:click="cli">点击</button>

    </div>

</template>

<script>

    export default {

        name:'StudentComp',

        data(){

            return {

            }

        },

        props: {

            stname: {

                type: String,     // 类型

                required: true,// 必要性

                default: 'cess'// 默认值

            },

            age:{

                type: Number,     // 类型

                required: true,// 必要性

                default: 18// 默认值

            }

        },

        methods: {

            cli(){

                this.age = 20

            }

        }

    }

</script>

发现报错，子组件默认不能修改父组件传的props值

7.2 SchoolComp里面修改