vue ref的使用
时间:2021-09-20
本文章向大家介绍vue ref的使用,主要包括vue ref的使用使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、给标签设置ref属性
<h2 ref='midautumn'>中秋快乐111</h2>
2、在mounted()中使用$refs对获取到的标签使用(methods与data等平级)
mounted(){ //打印出所有带ref属性的值,是一个对象,{midautumn: h2, mid-autumn: h3, son2: VueComponent} console.log(this.$refs); // 打印出名ref属性为midautumn的标签h2 console.log(this.$refs.midautumn);//h2 // ref属性为mid-autumn的标签h3 console.log(this.$refs['mid-autumn']); // 使用$refs将h2颜色改为red this.$refs.midautumn.style.color = 'red'; // js可以获取子组件渲染后的内容<div id='son2'>...</div> console.log(document.getElementById('son2')); // refs获取子组件son2 VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …} console.log(this.$refs.son2); // refs获取子组件中data数据msg console.log(this.$refs.son2.msg); // refs获取子组件中methods方法 console.log(this.$refs.son2.log1()); }
3、ref与js获取id的区别:
ref可以获取子组件中所有内容
id只能获取渲染后的标签
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id='app'> <h2 ref='midautumn'>中秋快乐111</h2> <h3 ref='mid-autumn'>中秋快乐222</h3> <son id="son2" ref='son2'></son> </div> <template id="son"> <div>放假还得写作业,一点不快乐<br> {{msg}} </div> </template> <script> const vm = new Vue({ el: '#app', data: { }, methods: { }, components:{ son:{ template:'#son', data(){ return{ msg:'我不是真正的快乐' } }, methods:{ log1(){ return 111 } } } }, mounted(){ //打印出所有带ref属性的值,是一个对象,{midautumn: h2, mid-autumn: h3, son2: VueComponent} console.log(this.$refs); // 打印出名ref属性为midautumn的标签h2 console.log(this.$refs.midautumn);//h2 // ref属性为mid-autumn的标签h3 console.log(this.$refs['mid-autumn']); // 使用$refs将h2颜色改为red this.$refs.midautumn.style.color = 'red'; // js可以获取子组件渲染后的内容<div id='son2'>...</div> console.log(document.getElementById('son2')); // refs获取子组件son2 VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …} console.log(this.$refs.son2); // refs获取子组件中data数据msg console.log(this.$refs.son2.msg); // refs获取子组件中methods方法 console.log(this.$refs.son2.log1()); } }) </script> </body> </html>
打印结果:
1、浏览器
2、console控制台
原文地址:https://www.cnblogs.com/myqinyh/p/15313997.html
- Linux快速入门03-系统管理
- JavaScript引用类型之Array数组的concat()和push()方法的区别
- JavaScript引用类型之Array数组的排序方法
- Linux快速入门02-文件系统管理
- JavaScript引用类型之Array数组的toString()和valueof()方法的区别
- Linux快速入门04-扩展知识
- JavaScript引用类型之Array数组的拼接方法-concat()和截取方法-slice()
- JavaScript引用类型之Array数组的拼接方法-concat()和截取方法-slice()
- 比特币在2017全球新闻谷歌搜索中排名第二,韩国政府聚焦比特币市场诈骗和假冒交易所
- ExtJs学习笔记(13)_Card布局
- Html与CSS快速入门03-CSS基础应用
- Html与CSS快速入门02-HTML基础应用
- “人类什么德性,机器人就是什么德性”
- ExtJs学习笔记(12)_Anchor布局
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在 Kubernetes 中使用 Helm Hooks 迁移数据库
- 漫画:如何螺旋遍历二维数组?
- 轻松学Pytorch-迁移学习实现表面缺陷检查
- 汇总 | OpenCV4中的非典型深度学习模型
- 如何使用私有仓库的 Go Modules
- python绘图 | salem一招解决所有可视化中的掩膜(Mask)问题
- Tungsten Fabric知识库丨关于OpenStack、K8s、CentOS安装问题的补充
- Cypress系列(51)- its() 命令详解
- 推荐 | 深度学习反卷积最易懂理解
- Java实现抢红包算法,附完整代码(公平版和手速版)
- 【代码审计】xyhcms3.5后台任意文件读取
- 前端架构探索与实践
- Centos编译JDK8源码
- R-tmap 绘制带指北针和比例尺的空间地图
- 升级Php Curl扩展遇到的坑