Vue.js 中的 ref 属性与组件 Props 深入理解
需积分: 5 96 浏览量
更新于2024-08-04
收藏 3KB MD 举报
"Vue.js基础知识,包括ref属性的使用和组件间的数据传递——props特性"
Vue.js是一个流行的前端JavaScript框架,用于构建用户界面。在Vue中,`ref`属性和`props`是两个重要的概念,它们分别帮助我们实现对DOM元素的引用以及组件间的数据通信。
### 1. ref属性
`ref`属性主要用于获取Vue实例中对应的DOM元素或组件实例。Vue提供了两种主要的使用方式:
1. **应用在HTML标签上**:当你在HTML元素上添加`ref`属性,Vue会在该元素渲染完成后,在Vue实例的`$refs`对象中创建一个对应的引用。例如,`<h1 ref="xxx"></h1>`,你可以通过`this.$refs.xxx`来访问这个元素的真实DOM节点。
2. **应用在组件标签上**:如果你在自定义组件上使用`ref`,则`this.$refs`中的引用将是该组件的实例对象,而不是DOM元素。例如,`<School ref="sch"/>`,你可以通过`this.$refs.sch`来访问School组件的实例,从而调用组件内部的方法或访问组件状态。
在给出的示例中:
```vue
<h1 v-text="msg" ref="title"></h1>
<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
<School ref="sch"/>
```
`showDOM`方法展示了如何通过`this.$refs`访问并打印出DOM元素和组件实例:
```vue
methods: {
showDOM() {
console.log(this.$refs.title); // 真实DOM元素
console.log(this.$refs.btn); // 真实DOM元素
console.log(this.$refs.sch); // School组件的实例对象
},
}
```
### 2. props配置项
`props`是Vue组件之间传递数据的基本机制,它允许父组件向子组件传递数据。有三种不同的方式来声明和限制props:
1. **简单声明**:通过数组直接列出要接收的prop名称,如`props: ['name', 'age', 'sex']`。
2. **限制类型**:通过对象声明并指定每个prop的数据类型,如`props: { name: String, age: Number, sex: String }`。
3. **全面控制**:进一步可以指定prop是否必需、默认值等,如:
```vue
props: {
name: {
type: String, // 类型是字符串
required: true, // 必须提供
default: '张三' // 默认值为'张三'
},
age: {
type: Number, // 类型是数字
// ...其他限制条件
}
}
```
注意,props是只读的,这意味着在子组件内部不能直接修改prop的值。如果需要在子组件中修改prop的值,应将prop的值复制到`data`对象中,并在`data`中进行修改,因为`data`中的属性是可变的。
在给出的另一个示例中,展示了如何在模板中使用`props`接收外部数据:
```vue
<template>
<div>
<Student name="李四" sex="女" :age="18" />
</div>
</template>
```
在这个例子中,`Student`组件通过`props`接收了`name`、`sex`和`age`三个属性,这些属性的值分别来自父组件。
Vue的`ref`属性和`props`特性是开发过程中非常实用的功能,它们帮助开发者更好地管理和操作DOM元素,以及在组件之间有效地传递数据。
578 浏览量
112 浏览量

m0_69120894
- 粉丝: 0
最新资源
- 下载Excel模板:利润中心往来表
- 交通灯单片机课程设计:源代码与Proteus仿真分析
- 掌握NPSOL优化程序及其SQP算法,助力非线性问题求解
- Java实现走迷宫游戏源码解析
- Linux下ProFTPD 1.3.2的安装配置教程
- 网吧加油站虚拟磁盘2011:支持多网卡负载均衡和SSD缓存
- Verilog实现的1MHz信号频率测量系统
- 安捷伦1-4位数码管PCB库设计指南
- Oracle基础入门与查询语句详解
- Excel利润中心营业分析模板使用指南
- Python打造Discord嵌齿轮与jishaku Bot模板快速入门
- 北欧宜家风家居官网模板下载
- 十字链表图结构数据实验源码解析
- 基于Java的Socket多线程通信系统实现
- MFC版RSA算法实现与VS2005测试
- 炫彩导航条的设计:CSS代码展示