文章目录
一、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>
不积跬步无以至千里 不积小流无以成江海