props

• 父组件给子组件传值
• 父组件：在组件元素中配置要传递的属性和值
• 子组件，配置props数据，接收父组件传递的属性

App.vue，该文件为父组件

<template>
    <div>
        <!-- 组件标签写标签属性-->
        <!-- 父组件给子组件（Student ）传递属性（name）和值（高高） -->

        <Student name="高高" sex="男" age="18"></Student>
    </div>
</template>

<script>
    import Aaa from './components/Student.vue'
    export default {
        name: "App",
        components:{
            Student:Aaa
        }
    }
</script>

• App.vue，该文件为父组件，在父组件配置如下：
  <Student name="高高" sex="男" age="18"></Student>

Student.vue 子组件接收，用prop整个属性接收

• 第一种写法

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

<script>
    export default {
        data(){
            return {
                msg:"欢迎"
            }
        },
        // 第一种写法：
        props: ['name','sex','age']
    }
</script>

• // 第一种写法：
  props: ['name','sex','age']

• 第二种写法

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

<script>
    export default {
        data(){
            return {
                msg:"欢迎"
            }
        },
        // 第一种写法：
        // props: ['name','sex','age']
        // 第二种写法：限制父组件传过来的类型
        props:{
            name:String,
            sex:String,
            age:Number
        }
    }
</script>

• 报了一个错：

  
  
  props类型报错.PNG

因为我们限制了类型，子组件要求传过来的值要是数字，但是父组件App.vue传过来的值是这样的<Student name="高高" sex="男" age="18"></Student>
age="18" 还是字符串类型，我们要把它变成数字类型，那么给age前面属性添加冒号:age="18",那么age等号右边的内容就变成了js表达式，这时候18就变成了数字类型

App.vue修改如下

<template>
    <div>
        <!-- 子组件传递属性和值 -->
        <Student name="高高" sex="男" :age="18"></Student>//添加了:
    </div>
</template>

<script>
    import Aaa from './components/Student.vue'
    export default {
        name: "App",
        components:{
            Student:Aaa
        }
    }
</script>

• 第三种写法

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

<script>
    export default {
        data(){
            return {
                msg:"欢迎"
            }
        },
        // 第一种写法：
        // props: ['name','sex','age']
        // 第二种写法：限制父组件传过来的类型
        // props:{
        //     name:String,
        //     sex:String,
        //     age:Number
        // }
        // 第三种写法：限制父组件传过来的类型、是否必填、是否有默认值
        props:{
            name: {
                type:String,//传过来的类型
                require:true//是否必填
            },
            sex: {
                type:String,
                // default:'男',//是否有默认值,这个和是否必填冲突，两者选一个
                require:true//是否必填

            },
            age: {
                type:Number,
                default:33//是否有默认值,
                
            }
        }
    }
</script>

• 不要修改父组件传过来的值，要是真要修改，就赋值给data里的某个变量作为中间变量，再对中间变量修改，props先接收值

<template>
    <div>
    <h1>{{msg}}</h1>
    <h2>姓名：{{name}}</h2>
    <h2>性别：{{sex}}</h2>
    <h2>年龄：{{myAge}}</h2>
    <button @click="change">修改年龄</button>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                msg:"欢迎",
                myAge:this.age//接收父组件年龄
            }
        },
        // 第一种写法：
        // props: ['name','sex','age']
        // 第二种写法：限制父组件传过来的类型
        // props:{
        //     name:String,
        //     sex:String,
        //     age:Number
        // }
        // 第三种写法：限制父组件传过来的类型、是否必填、是否有默认值
        props:{
            name: {
                type:String,//传过来的类型
                require:true//是否必填
            },
            sex: {
                type:String,
                // default:'男',//是否有默认值,这个和是否必填冲突，两者选一个
                require:true//是否必填

            },
            age: {
                type:Number,
                default:33//是否有默认值,        
            }
        },
        methods:{
            change(){
                this.myAge++
            }
        }
    }
</script>

• 要是props某个属性有default:33//是否有默认值, 父组件可以不填

 <Student name="高高" sex="男"></Student>//没有age