3.2.1 ref 属性

1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：
   1. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
   2. 获取：this.$refs.xxx

      代码演示

      ```vue

<a name="veQOg"></a>
# 3.2.2 prots 属性
1.  功能：让组件接收外部传过来的数据 
1.  传递数据：`<Demo name="xxx"/>` 
1.  接收数据： 
   1.  第一种方式（只接收）：`props:['name']` 
   1.  第二种方式（限制类型）：`props:{name:String}` 
   1.  第三种方式（限制类型、限制必要性、指定默认值）`:` 
props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
<a name="e9Bdw"></a>
## 代码演示
```vue
<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() {
            console.log(this)
            return {
                msg:'我是一个尚硅谷的学生',
                myAge:this.age
            }
        },
        methods: {
            updateAge(){
                this.myAge++
            }
        },
        //简单声明接收
        // props:['name','age','sex'] 
        //接收的同时对数据进行类型限制
        /* props:{
            name:String,
            age:Number,
            sex:String
        } */
        //接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
        props:{
            name:{
                type:String, //name的类型是字符串
                required:true, //name是必要的
            },
            age:{
                type:Number,
                default:99 //默认值
            },
            sex:{
                type:String,
                required:true
            }
        }
    }
</script>

:age是动态绑定，:age="18"表示 age 的值必须是运行双引号（”18”）里面 js 表达式执行的结果，不加:的标签都做字符串处理。

<template>
    <div>
        <Student name="李四" sex="女" :age="18"/>
    </div>
</template>

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

    export default {
        name:'App',
        components:{Student}
    }
</script>

演示效果