Vue：props 配置项-程序员文哥

什么是props

props是一种用于传递数据的特性。
它允许您在父组件中定义数据，并将其传递给子组件。
子组件可以通过props来接收这些数据，并使用它们来渲染自己。

props使用方式

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

传递数据：

//:age="18"  ，通过v-bind使得里面的18是数字
//number="18",是字符串
<student ref="stu" name="张三" :age="18" number="18"></student>

接收数据

第一种方式（只接收）
```
props: ['name', 'age', 'number'],
```

第二种方式（限制类型）

props: { name: String, age: Number, number: Number },

第三种方式（限制类型、限制必要性、指定默认值）

//更多参考：https://v2.cn.vuejs.org/v2/guide/components-props.html
            props: {
                name: String,
                age: {
                    type: Number, // 类型
                    default: 10, //默认值
                    required: true, //必填
                    validator: function (value) {
                        //如果验证失败，控制台输出一条警告
                        return value >= 0 && value < 150;
                    },
                },
                number: String
            }

示例代码

    <div id="app">
        <student ref="stu" name="张三" :age="18" number="18"></student>
        <button @click="handleAge">年龄+1</button>
    </div>
    <script>

        const student = {
            template: ` <div> 
                学校:{{school}} <br/><hr/>
                名称:{{name}} <br/>
                年龄：{{myAge}} <br/>
                学号：{{number}} 
                </div>`,
            data() {
                return {
                    school: '北京大学',
                    myAge: this.age,
                }
            },
            props: {
                name: String,
                age: {
                    type: Number, // 类型
                    default: 10, //默认值
                    required: true, //必填
                    validator: function (value) {
                        //如果验证失败，控制台输出一条警告
                        return value >= 0 && value < 150;
                    },
                },
                number: String
            },
            methods: {
                addAge() {
                    this.myAge++;
                }
            },
        }
        let vm = new Vue({
            el: '#app',
            //注册组件
            components: { student },
            methods: {
                handleAge() {
                    //调用子组件函数
                    this.$refs.stu.addAge();
                }
            }
        })
    </script>