[JavaScript知识库]《Vue学习》props

props的引入呢，就是提高组件的复用，举个实际的例子，你写了一个帽子组件，你给他的属性是红色，50cmsize，但是隔壁老王，想要一顶绿色，60cmsize的帽子，为了不让他重新再写一个帽子组件。props属性就发挥了很大的作用。

下面是一个Student组件，可以用来复用的，name sex age都是不确定的，谁使用整个组件谁就需要传参

<template>
    <div>
        <h2>学生名字:{{name}}</h2>
        <h2>学生性别:{{sex}}</h2>
        <h2>学生年龄:{{age}}</h2>
        <hr>
        <h2>个性签名:{{msg}}</h2>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data(){
             
            return {
                msg:'我是一只呆萌的小猪'
            }
        },
        props:['name','sex','age']
    }
</script>

App使用了student组件，并传了参

<template>
    <div>
        <Student name="马小帅" sex="男" age="18"/>
    </div>
</template>

<script>
    import Student from './components/Student.vue'
    export default {
        name:'App',
        components:{Student},
        data(){
            return {
                msg:'欢迎学习Vue'
            }
        },
    }
</script>

效果图

?但是还是存在问题，就是这样传的都是字符类型，如果需要数字类型，在传参属性前面加个v-bind：即可。

<template>
    <div>
        <Student name="马小帅" sex="男" :age="18+1"/>
    </div>
</template>

<script>
    import Student from './components/Student.vue'
    export default {
        name:'App',
        components:{Student},
        data(){
            return {
                msg:'欢迎学习Vue'
            }
        },
    }
</script>

?如果不加v-bind的话，会显示181.

props加上限制，不是我规定的类型，vue会报错

如果age不是数值类型的，会报错提示

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

第二层限制：类型+必要+默认值

props:{
            name:{
                type:String,//类型
                required:true,//必须要填
            },
            age:{
                type:Number,
                default:99//可填，可不填，不填默认值是99
            },
            sex:{
                type:String,
                required:true
            }
        }

最好不要直接修改props里的值，会报错，用一个中间量，来达到修改的作用。另外vue有的属性不用来作参数，如ref，key等等

就像这样，这样就可以很好的修改年龄了。就是用个中间量过度，我修改中间量就没得问题了

<template>
    <div>
        <h2>学生名字:{{name}}</h2>
        <h2>学生性别:{{sex}}</h2>
        <h2>学生年龄:{{MyAge}}</h2>
        <button @click="LargeAge">点我让年龄变大</button>
        <hr>
        <h2>个性签名:{{msg}}</h2>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data(){
            return {
                msg:'我是一只呆萌的小猪',
                MyAge:this.age
            }
        },
        // props:['name','sex','age']
        // props:{
        //     name:String,
        //     age:Number,
        //     sex:String
        // }
        props:{
            name:{
                type:String,//类型
                required:true,//必须要填
            },
            age:{
                type:Number,
                default:99//可填，可不填，不填默认值是99
            },
            sex:{
                type:String,
                required:true
            }
        },
        methods:{
            LargeAge(){
                this.MyAge++
            }
        }
    }
</script>