vue中$refs的使用记录

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中$refs的使用记录相关的知识,希望对你有一定的参考价值。

参考技术A ref 目前使用过的三种方式:

1、在html的元素中使用rel,可在js中直接调用该元素,用this.$refs.(ref值) 获取到的是dom元素

2、在vue的组件上加rel,可在js中直接使用该组件包括该组件的方法,用this.$refs.(ref值).方法名()

3、在v-for的循环列中使用rel

避坑:

v-for中使用rel需要绑定 变量 ,即v-bind:rel='变量名'

ref 需要在dom渲染完成后才会有 ,在使用的时候确保dom已经渲染完成。比如在生命周期  mounted() 钩子中调用 ,或者 在 this.$nextTick(()=>) 中调用 。

如果rel循环未绑定变量,那就$refs获取获取数组再循环得到使用即可

例子1:在html元素上使用

<div id="app">

    <h1 ref="h1ele">这是h1</h1>

    <hello ref="ho"></hello>

    <button @click="getref">获取h1元素</button>

</div>

获取注册过 ref 的所有组件或元素

methods:

        getref()

          // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素

          console.log(this.$refs.h1ele.innerText);

          this.$refs.h1ele.style.color = 'red';// 修改html样式

          console.log(this.$refs.ho.msg);// 获取组件数据

          console.log(this.$refs.ho.test);// 获取组件的方法

       

     

例子2:

<html部分

<view class="example-body">

<button class="button" type="primary" @click="togglePopup('top', 'popup')">顶部弹出 popup</button>

<button class="button" type="primary" @click="togglePopup('center', 'popup')">中间弹出 popup</button>

<button class="button" type="primary" @click="togglePopup('bottom', 'popup')">底部弹出 popup</button>

</view>

<uni-popup ref="showpopup" :type="type" @change="change"><text class="popup-content"> content </text></uni-popup>

<uni-popup ref="showtip" :type="type" :mask-click="false" @change="change">

<view class="uni-tip">

<text class="uni-tip-title">警告</text>

<text class="uni-tip-content">这是一个通过自定义 popup,自由扩展的 警告弹窗。点击遮罩不会关闭弹窗。</text>

<view class="uni-tip-group-button">

<text class="uni-tip-button" @click="cancel('tip')">取消</text>

<text class="uni-tip-button" @click="cancel('tip')">确定</text>

</view>

</view>

</uni-popup>

<js部分

methods:

togglePopup(type, open)

switch (type)

case 'top':

this.content = '顶部弹出 popup'

break

case 'bottom':

this.content = '底部弹出 popup'

break

case 'center':

this.content = '居中弹出 popup'

break



this.type = type

this.$nextTick(() =>

this.$refs['show' + open].open()

)

,

cancel(type)

this.$refs['show' + type].close()

,

change(e)

console.log('是否打开:' + e.show)



,

一般来讲获取DOM元素,需document.querySelector(".class")获取这个dom节点,然后在获取元素的值。

但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的元素上绑定rel,然后$refs里面调用就行。

然后在javascript里面这样调用:this.$refs.元素绑定rel  这样就可以减少获取dom节点的消耗了

以上是关于vue中$refs的使用记录的主要内容,如果未能解决你的问题,请参考以下文章

记录一次vue A页面 使用openModal打开B页面并访问B页面的数据

记录一次vue A页面 使用openModal打开B页面并访问B页面的数据

记录Vue 点击元素生成图片,并下载

vue-爬坑记录

refreactivetoReftoRefs的作用与区别(Vue3学习记录)

记录vue动态切换video src 视频还是播放之前的视频,即使src已改变