重新认识vue之 ref

辛敞
• 阅读 2992

ref

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。此时对 ref 的认识在于,元素属性写了 refs, 则可以通过 this.$refs 访问到该元素。其实ref 用在不同位置,访问到的东西是不一样的。

ref 在子组件上

如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。
也就是说 如果ref 用在子组件上,我们还可以通过 this.$refs.xxx 调用子组件方法。比如 this.$refs.pointdDetailChart(param) ,前提是 这个组件有这个方法。

ref 注册时间

因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。

点赞
收藏
评论区
推荐文章
晴空闲云 晴空闲云
3年前
vue3中基于script setup语法糖的$refs使用
在用vue3开发项目的时候,需要调用子组件的方法,于是想着用$refs来实现,但是我是使用scriptsetup语法糖,原先vue2的语法已经不适用了。于是一番折腾和查阅资料,终于搞定。vue2语法vue2语法在组件上设置ref属性后,在代码里可以通过this.$refs.ref值访问到对应的子组件。一个设置ref值的组件:html在js代码中可以通
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Chase620 Chase620
4年前
vue的8种通信方式
1.props/emit1.父组件向子组件传值下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:\'红楼梦','西游记','三国演义'\//section父组件<template<divclass"section"
Easter79 Easter79
3年前
taro 组件的外部样式和全局样式
自定义组件对应的样式文件,只对该组件内的节点生效。编写组件样式时,需要注意以下几点:1.组件和引用组件的页面不能使用id选择器(a)、属性选择器(\a\)和标签名选择器,请改用class选择器。2.组件和引用组件的页面中使用后代选择器(.a.b)在一些极端情况下会有非预期的表现,如遇,请避免使用。3.子
Jacquelyn38 Jacquelyn38
4年前
从0到1搭建一款页面自适应组件(Vue.js)
组件将根据屏幕比例及当前浏览器窗口大小,自动进行缩放处理。建议在组件内使用百分比搭配flex进行布局,以便于在不同的分辨率下得到较为一致的展示效果。使用前请注意将body的margin设为0,否则会引起计算误差。fullScreenContainer.vue<template<divid"fullscreencontainer":ref"ref
浩浩 浩浩
4年前
【Flutter实战】对齐与相对定位(Align)
4.6对齐与相对定位(Align)在上一节中我们讲过通过Stack和Positioned,我们可以指定一个或多个子元素相对于父元素各个边的精确偏移,并且可以重叠。但如果我们只想简单的调整一个子元素在父元素中的位置的话,使用Align组件会更简单一些。4.6.1AlignAlign组件可以调整子组件的位置,并且可以根据子
Stella981 Stella981
3年前
PhoneGap设置Icon
参考:http://cordova.apache.org/docs/en/latest/config\_ref/images.html通过config.xml中的<icon标签来设置Icon<iconsrc"res/ios/icon.png"platform"ios"width"57"height"57"densi
Stella981 Stella981
3年前
CodeMirror的使用方法
这里是利用vue来开发项目:1、利用textare生成编辑器<textarearef"textarea"</textarea2、创建编辑器对象leteditJsonCodeMirror.fromTextArea(this.$refs.textarea,{mode
Stella981 Stella981
3年前
Clojure的引用类型:var,ref,agent和atom
作为其他值的容器,也都可以解引用。deref不会阻塞。addwatch(addwatchreferencekeyfn)可以定义引用值发生改变时的回调,fn是4个参数:key(atom/var/agent)旧状态新状态(defa(atom{}))(addwat
Stella981 Stella981
3年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
小万哥 小万哥
1年前
XML Schema 复杂元素类型详解:定义及示例解析
在XMLSchema(XSD)中,复杂元素是指包含其他元素和/或属性的XML元素。复杂元素可以分为四种类型:1.空元素:仅包含其他元素和/或属性的元素。2.仅包含其他元素的元素:不包含文本内容,只包含其他子元素的元素。3.仅包含文本的元素:不包含其他子元素
辛敞
辛敞
Lv1
下次见面我一定要拥抱你,用尽全身力气。
文章
5
粉丝
0
获赞
0