Vue 24 props

1 简介

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

2 一个简单示例

1）StudentComp.vue

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

　　　　　　<h1>{{age}}</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里面修改

　　添加一个按钮

　　点击事件中去修改age的值

<template>
    <div>
        <h1 >{{schoolname}}</h1>
        <StudentComp stname="学生" :age="age" ></StudentComp>

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

<script>
import StudentComp from './StudentComp'

    export default {
        name:'SchoolComp',
        data(){
            return {
                schoolname:'实验小学1',
                age:18
            }
        },
        components:{
            StudentComp
        },methods: {
            cli(){
                this.age = 20
            }
        }
    }
</script>

<style>

</style>

点击按钮，值改变

在传值的组件中可以修改