ref获取元素 vue 删除子元素_vue中的 ref 和 $refs
相信前端开发或者后端开发都用过jquery,因为不是数据驱动,为了获取某些元素的value值,都操作过Dom元素。
// 使用Jquery获取Dom元素值$("#id").text('xxx') $("#id").value('xxx') // 使用原生Domdocument.getElementById("id") document.getElementsByClassName("className")
都经历过被Dom操作支配的恐惧,现在很多框架也都帮我们完成了这部分操作,我们不用再去子元素、父元素,只负责数据逻辑即可,如Vue,但是如果我们在某些条件下,依然需要操作Dom时,怎么办呢?Vue提供了ref、$ref。本次,我们就详细讲讲这两个属性。1.refref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:
<p ref="p">hellop>
<child-component ref="child">child-component>
1)作用于html标签
<template> <div class="about"> <div ref="userName">{{ username }}div> <button @click="clickBtn">点击button> div>template><script>export default { data() {return { username: "测试" }; },methods: { clickBtn() {console.log(this.$refs.userName); } }};script>
点击按钮,我们可以拿到绑定的Dom2)作用于组件子组件
<template> <div>{{msg}}div>template>
<script>export default { data() {return {msg: '我是子组件' } },methods: { changeMsg() {this.msg = '变身' } }}script>
父组件
<template> <div @click="parentMethod"> <children ref="children">children> div>template>
<script>import children from 'components/children.vue'export default {components: { children }, data() {return {} },methods: { parentMethod() {//返回一个对象this.$refs.children // 调用children的changeMsg方法this.$refs.children.changeMsg() } }}script>
这种方式我们可以通过$refs直接调用子组件方法2.$refs一个对象,持有注册过 ref attribute的所有 DOM 元素和组件实例。
<template> <div class="about"> <div ref="userName">{{ username }}div> <div ref="age">{{ age }}div> <button @click="clickBtn">点击button> div>template><script>export default { data() {return {username: "测试",age: 11 }; },methods: { clickBtn() {console.log(this.$refs); } }};script>
可以看到是个对象,里边包含了我们的定义的两个,可以通过下面方式,获取Dom实例进行后续操作。
this.$refs.userNamethis.$refs.age
$refs 只会在组件渲染完成之后生效,并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问
ref获取元素 vue 删除子元素_vue中的 ref 和 $refs相关推荐
- js 获取元素,同级元素下的子元素总结
太原总结 不慌不慌,来日方长 ** 1.获取同级元素 form 下的 div 元素下的 input标签的value值 ** //html代码 <div id="replySubmit& ...
- Vue中v-for必须在vue实例对应元素下的子元素中循环渲染数据
异常信息 Cannot use v-for on 1 stateful componentroot element because it renders multiple elements 翻译大意: ...
- CSS实现父元素半透明,子元素不透明
CSS实现父元素半透明,子元素不透明. 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明 ...
- vue 父组件获取接口值传到子组件_vue父组件异步获取数据传给子组件的方法
但是现在问题是父组件的数据是异步获取的,而子组件一开始就会渲染,如果此时没有传入数据,而子组件又要用到数据中的length属性时就会报错: 怎么办呢?最简单的办法就是让子组件条件渲染,当有数据的时候才 ...
- JS获取数组元素下标,获取数组元素,删除数组元素,添加数组元素
/* 获取数组元素下标 */var i=list_done.map(item=>item.text).indexOf(value);/* 获取数组元素 */var cur_item=list_d ...
- Redis 笔记(06)— set 类型(向集合添加元素、获取集合元素个数、判断集合中是否包含某个元素、删除给定元素、返回集合中所有元素、计算集合的交集、并集、差集)
Redis 的 set 集合内部的键值对是无序的唯一的.它的内部实现相当于一个特殊的字典,字典中所有的 value 都是一个值 NULL .当集合中最后一个元素移除之后,数据结构自动删除,内存被回收. ...
- jquery 同级元素下的子元素_jq 获取所有父级元素及同级元素及子元素的方法(推荐)...
1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id&quo ...
- 【vue3】ref获取v-for循环渲染的元素
前言 在vue2里我们可以给元素绑定ref属性,然后使用this.$refs.xxx 就可以获取到元素. 而在vue3版本中,你可以继续使用vue2的option Api的语法,也可以使用vue2的写 ...
- jq获取父元素下的子元素
导入jq库 通过parent获取父元素 children获取子元素 $(".make-order").click(function(e) {var theli =$(this).p ...
最新文章
- 程序员应该具备的十个项目习惯
- python统计个数的函数_Python
- 企业官网页面设计谨记三个要点!
- PostgreSQL 无会话、有会话模式 - 客服平均响应速度(RT)实时计算实践(窗口查询\流计算)...
- 【分布式共识二】拜占庭将军问题----口头协议
- 丘成桐:完全不懂数学,才会有“数学无用”的说法
- oracle 启用闪回数据库,如何启用Oracle10g闪回数据库特性
- 成中集团线下IDC迁移上云
- 金蝶软件怎么过账_代理记账用什么财务软件?
- 用Java动态代理实现AOP
- 轮式联合收割机液压系统设计
- 计算机二级函数lookup函数,Lookup函数“0/”结构的详细剖析
- 仓位管理之二: 凯利公式指导投资与多种资金管理方式
- Speed Test隐私政策
- 当我们想要用LinkedIn领英开发客户时,如何设计填写职位头衔?
- TCP协议--复位报文段
- 学习笔记(05):Mysql数据库基础入门视频教程-自连接
- VB语音对接验证码短信接口DEMO示例
- 学术前沿趋势分析Task01
- 程序员年入百万指南(二)之为什么程序员应该懂点销售
热门文章
- 数据库语法_圣诞快乐:用GaussDB T 绘制一颗圣诞树,兼论高斯数据库语法兼容...
- 怎么看python环境变量配置是否好了验证图片_python 的 tesserocr 模块安装与获取图片验证码...
- python3 join函数_Python中.join()和os.path.join()两个函数的用法详解
- 风控建模 python 知乎_风控建模基本要求及面试问题小结
- centos 程序 mysql数据库文件位置,CentOS 更改MySQL数据库目录位置
- docker 导入导出镜像
- 又一款超酷的 Python 可视化神器:cutecharts
- 一个已经存在 10 年,却被严重低估的库
- 更高效的利用Jupyter+pandas进行数据分析,6种常用数据格式效率对比!
- GitHub 4K+Star!SpaceX火箭数据开放API接口,可用Python进行抓取分析