props配置项

1. 功能

让 组件 接收 外部 传过来的数据。

2. 传递数据：

直接在父标签中写属性： <Demo name="xxx"/>

3. 接收数据：

1. 第一种方式（只接收）：props:['name']
2. 第二种方式（限制类型）：props:{name:String}
3. 第三种方式（限制类型+限制必要性+指定默认值）：

props:{
    name:{
        type:String,   //限制类型
        required:true, //限制必要性
        default:'老王' //指定默认值
    }
}

备注：props是只读的！
Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

源码

App.vue

<template>
    <div>
        <!-- 在下面传递 props参数时，其值必须加 "" 
        :age="18"  如果不加: ，那么给 age 传递的就是一个字符串。
                    如果加: ，就表示 v-bind:age="18" ，表示确实需要传一个age，但是age的值必须是 运行 "..."内 js表达式 运算后的返回值。 

        -->

        <Student name="李四" sex="女" :age="18"/>

    </div>
</template>

<script>
    import Student from './components/Student'

    export default {
        name:'App',
        components:{
            Student
        }
    }
</script>

components\Student.vue

<template>
    <div>
        <h1>{{msg}}</h1>

        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>

        <!-- data属性中的 myAge 来源于 props -->
        <h2>学生年龄：{{myAge+1}}</h2>

        <button @click="updateAge">尝试修改收到的年龄</button>
    </div>
</template>

<script>
    export default {
        name:'StudentVue',
        data() {
            console.log(this)
            return {
                msg:'我是一个SofTool.CN的阅读者',

                //我配置的属性叫 myAge，来源于 外部传递过来的参数age
                myAge:this.age,

            }
        },
        methods: {
            //修改年龄的按钮触发
            updateAge(){
                this.myAge++
            }
        },
        //写法1: 简单声明接收。 //数组式写法
        //[] 数组中的接收参数，顺序无关。
        //问题:
        //    props 将 [] 中 参数接收之后，放哪了? 放在了 vc 中。
        // props:['name','age','sex'] 

        //写法2: 如果想对 [] 参数进行限制,那么...  //对象式写法
        //    接收的同时对数据进行 类型 限制
        /* props:{
            name:String,
            age:Number,
            sex:String
        } */

        //写法3: 
        //    接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
        //props中的数据会被优先放到 Vue 中，然后才是 data属性。 所以 data配置项中才可以引用 props中的参数。
        props:{
            name:{
                type:String,     //name的类型是字符串
                required:true,  //表示 name 参数是必须传的
            },
            age:{
                type:Number,
                default:99 //默认值 //表示: 当前 age参数，可传可不传。如果不传，那么就给一个默认值为99
            },
            sex:{
                type:String,
                required:true
            }
        }
    }
</script>