一、refs 属性
1. refs 的作用
被用来给元素或组件注册引用信息（id 的替代者）。
2. 应用的方面
应用在 html 标签上获取的是真实 DOM 元素，应用在组件标签上是组件实例对象（vc）。
3. 使用方式
//打标识 <h1 ref="xxx">...</h1> 或 <School ref="xxx">...</School> //获取 this.$refs.xxx
4. 实例：打印输出 DOM 元素
注意：
- 打标识的时候是 ref
- 获取的时候是 $refs
<template> <div> <h2 v-text="msg" ref="title"></h2> <button ref="btn" @click="showDOM">点我输出 DOM元素</button> <School ref="sch" /> </div> </template> <script> import School from "./components/School.vue"; export default { name: "App", data() { return { msg: "Hello vue", }; }, methods: { showDOM() { console.log(this.$refs.title); console.log(this.$refs.btn); console.log(this.$refs.sch); }, }, components: { School, }, }; </script>
二、配置项 props
1. 功能：让组件接收外部传过来的数据
2. 传递数据
<Demo name="xxx"/>
3. 接收数据
//第一种方式（只接收）： props:['name']
//第二种方式（限制类型）： props:{ name: String }
第三种方式（限制类型、限制必要性、指定默认值）： props:{ name:{ type: String, //类型 required: true,//必要性 default:'老王' //默认值 } }
备注：props 是只读的，Vue底层会监测你对 props 的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么复制 props 的内容到 data 中一份，然后去修改 data 中的数据。
4. 接收姓名、年龄和性别的几种方式
//简单接收 props:['name','sex','age']
//接收的同时对数据进行类型限制 props:{ name: String, age: Number, sex: String }
//接收的同时对数据：进行类型限制 + 默认值的指定 + 必要性的限制 props:{ name:{ type: String, //name的类型是字符串 required: true //名字是必要的 }, age:{ type: Number, //age的类型是数值 default: 99 //不传的默认值 }, sex:{ type: String, required: true } }
5. 实例：子组件配置 props，接收父组件的值
注意点：
子组件配置 props 传过来的都是父组件在标签中配置的属性。
需要动态绑定的属性，在父组件标签中要添加 v-bind 指令进行单项数据绑定。
需要动态绑定的属性，在子组件中需要在 data 中通过 this.xxx 获取，并赋给一个值，以便通过插值表达式呈现在页面中。
student.vue
<template> <div> <h2>{{ msg }}</h2> <h3>学生姓名：{{ name }}</h3> <h3>学生性别：{{ sex }}</h3> <h3>学生年龄：{{ myAge }}</h3> <button @click="addAge">年龄 +1</button> </div> </template> <script> export default { name: "StudentName", props: ["name", "sex", "age"], data() { return { msg: "I am a student", myAge: this.age, }; }, methods: { addAge() { this.myAge++; }, }, }; </script>
App.vue
<template> <div> <Student name="张三" sex="男" :age="20"></Student> <Student name="李四" sex="男" :age="22"></Student> </div> </template> <script> import Student from "./components/Student.vue"; export default { name: "App", components: { Student, }, }; </script>
不积跬步无以至千里 不积小流无以成江海
