Vue12. ref与props

ref属性

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

<template>
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
        <School ref="sch"/>
    </div>
</template>

<script>
    //引入School组件
    import School from './components/School'

    export default {
        name:'App',
        components:{School},
        data() {
            return {
                msg:'欢迎学习Vue！'
            }
        },
        methods: {
            showDOM(){
                console.log(this.$refs.title) //真实DOM元素
                console.log(this.$refs.btn) //真实DOM元素
                console.log(this.$refs.sch) //School组件的实例对象（vc）
            }
        },
    }
</script>

props配置项

1. 功能：让组件接收外部传过来的数据

2. 传递数据：直接在组件标签里写属性 <Demo name="xxx"/>

3. 接收数据：

   a. 第一种方式（只接收）：props:['name']

   b. 第二种方式（限制类型）：props:{name:String}

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

props:{
   name:{
   type:String, //类型
   required:true, //必要性
   default:'老王' //默认值
   //required和default 两者只能传一个
   }
}

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

<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: 'I am a WestPoint student',
     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>