Vue props配置

1、props配置项

props的作用是让组件接收外部传过来的数据（接收参数）

2、组件传参

向组件Student传入参数：name，sex，age

<!-- 第一种方式：直接写参数名=xxx ，传入的是字符串形式-->
<Student name="李四" sex="女" age="18"/>

<!-- 第二种方式 动态绑定的方式传入v-bind:xxx，简写形式为:xxx。动态绑定的方式会将引号里的内容按表达式来解析后再传参-->
<Student :name="李四" :sex="女" :age="18"/>

3、组件接收参数

第一种方式（直接接收，常用）

<template>
    <div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            console.log(this)
            return {
                msg:'我在上幼儿园大班',
            }
        },//简单声明接收，接收的是字符串，比如age传入的是数字，接收后的也是字符串，要计算需要进行转换
        props:['name','age','sex'] 
    }
</script>

 第二种方式（限制参数类型）

<template>
    <div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {return {
                msg:'我在上幼儿园大班'
            }
        },

        //接收的同时对数据进行类型限制。注意，虽然有限制，但是传参后页面依然会显示，只是控制台会报错
        props:{
            name:String,
            age:Number,
            sex:String
        }
    }
</script>

 

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

<template>
    <div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {return {
                msg:'我在上幼儿园大班'
            }
        },

        //接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
        props:{
            name:{
                type:String, //name的类型是字符串
                required:true, //name是必要的
            },
            age:{
                type:Number,
                default:99 //设置默认值
            },
            sex:{
                type:String,
                required:true
            }
        }
    }
</script>

 

4、props注意点

• props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
• props和data中声明的属性名不能重复
• props声明的属性名不能为一些关键字，如key，ref

<template>
    <div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <h2>学生年龄：{{myAge+1}}</h2>
        <button @click="updateAge">尝试修改收到的年龄</button>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {return {
                msg:'我在上幼儿园大班',
                myAge:this.age //将props属性复制到data中进行修改操作。props上的属性会优先被放到vc上，所以这里是可以直接读的
            }
        },
        methods: {
            updateAge(){
                this.myAge++
            }
        },
        //简单声明接收
        props:['name','age','sex']
    }
</script>

5、props接收函数，

props可以接收使用者传递的函数，并调用，同时可以回传参数给使用者。即由子向父传递参数

<!-- 父组件App.vue -->
<template>
    <div>
        <!-- 给子组件传递了一个方法 -->
        <School :parentAdd="parentAdd"></School>
    </div>
</template>

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

    export default {
        name:'App',
        components:{School},
        methods: {
            parentAdd(options){
                console.info(options)
            }
        },
    }
</script>

 

<!-- 子组件School.vue -->
<template>
    <div class="school">
        <button @click="sumAdd">调用父组件方法</button>
    </div>
</template>

<script>
    export default {
        name:'School',
        //props接收传递的函数
        props:["parentAdd"],
        methods:{
            sumAdd(){
                //调用接收的函数，并传递参数。因为props接收后在vc上，所以可以直接通过this使用
                this.parentAdd("invoked by sun111")
            }
        }
    }
</script>