vue動(dòng)態(tài)綁定ref(使用變量)以及獲取方式
vue動(dòng)態(tài)綁定ref及獲取
正常情況,我們需要在vue中獲得某個(gè)dom或者組件,我們會(huì)通過綁定 ref 然后通過綁定后的名字來獲取這個(gè)dom 。
但是,如果我們?cè)趘-for中綁定ref的話,那么這個(gè)ref就會(huì)存在多個(gè),比如我們點(diǎn)擊事件讓對(duì)應(yīng)的顯示/隱藏的話,我們很難找到這個(gè)對(duì)應(yīng)的元素。
那么,這時(shí)我們需要?jiǎng)討B(tài)綁定不一樣的ref(比如 Arr1、Arr2、Arr3這種),那么我們?nèi)绾螌?shí)現(xiàn)呢?
一起來看下代碼吧
<div class="videoList"> <el-tree :data="videoData" :highlight-current="false" :props="defaultProps" @node-click="handleNodeClick" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" :filter-node-method="filterNode" class="rd-surveillance-tree" :indent="0" ref="tree" > <span class="custom-tree-node" slot-scope="{ node, data }"> <span class="custom-tree-label" :title="node.label"> <i class="iconfont" :class="data.rtmp ? rtmpClass : iconClass" :style="{ color: data.rtmp ? '#00b7ff' : '#fff', fontSize: data.rtmp ? '24px' : '14px', }" ></i> {{ node.label }} </span> <span class="custom-tree-player" v-if="!data.rtmp">{{ data.children.length }}</span> <img class="custom-tree-player rtmpVideo" v-else src="../../../static/images/videoSurveillance/videoSurveillancePlay.png" @click="playVideo(data)" :ref="'playBtn' + data.id" /> </span> </el-tree> </div>
這里可以看下最下面的圖片,圖片是個(gè)播放按鈕,我需要點(diǎn)擊播放按鈕,播放當(dāng)前的視頻,這里通過slot-scope綁定每一個(gè)對(duì)應(yīng)的數(shù)據(jù)(可以變相的理解為v-for循環(huán)),采用餓了么的組件庫
那么我們點(diǎn)擊對(duì)應(yīng)的圖片按鈕,就得播放對(duì)應(yīng)的視頻,那么我們得獲取到對(duì)應(yīng)的dom元素,如果綁定同樣的ref的話,那么就很難找到指定點(diǎn)擊對(duì)應(yīng)的視頻源
這里采取動(dòng)態(tài)綁定ref ,命名采取 playBtn + (數(shù)據(jù)id) ,這樣每個(gè)都會(huì)綁定不同的名字
注:這里說下比較坑的一點(diǎn),我們一般字符串加變量都會(huì)采用如下寫法
`playBtn${data.id}`
但是我們綁定ref的話是需要加冒號(hào)的,但是加了之后就不需要去再采取模板字符串的寫法,直接在引號(hào)中寫入即可。
然后這里說下怎么獲?。?/strong>
正常我們綁定是 ref="name" ,獲取就是this.$refs.name ,這里的name是自己命名的,但是它會(huì)被默認(rèn)為變量,然后去找取,而不是當(dāng)做字符串處理
那么我們獲取上面動(dòng)態(tài)綁定的,就不能寫 點(diǎn) 語法,可以采取方括號(hào)寫法:
play(data){ this.$refs[`playBtn${data.id}`].src = require('../../../static/images/Pause.png'); }
data是上面圖片綁定的點(diǎn)擊事件傳入的,獲取到當(dāng)前的data,然后獲取到id,就可以找到指定的ref綁定的dom,然后改變播放狀態(tài)即可。
注意:之前測(cè)試是不用加下標(biāo)的,但是之后有次在另一個(gè)項(xiàng)目里寫發(fā)現(xiàn)需要加下標(biāo),即 this.$refs[`playBtn${data.id}`][0] ,所以獲取不到的時(shí)候不妨先打印下日志,檢查下需不需要加下標(biāo),以及有沒有獲取到對(duì)應(yīng)的ref。
看下餓了么改造的tree:
好了,如上就是動(dòng)態(tài)綁定ref以及獲取的方法。
ref三種使用方法
ref
- - 給子元素綁定ref屬性,這樣父元素就能得到綁定了ref屬性的元素/組件
- - refs獲取 得到的是一個(gè)集合
- - refs要通過事件或者生命周期獲取
// 方法一: 字符串 (廢棄) showRef=()=>{ console.log(this.refs) //得到的是所有綁定了ref的元素/組件 } render() { return ( <div> 父組件 <button onClick={this.showRef}>獲取ref</button> <Mother ref='mother' ></Mother> </div> ) }
// 方法二 import React, { Component,createRef } from 'react' btn=createRef() showRef=()=>{ // 輸出ref 鍵名為current console.log(this.btn) } render() { return ( <div> <button onClick={this.showRef}>獲取ref</button> <Mother ref={this.btn} ></Mother> </div> ) }
//方法三: change=()=>{ console.log(this.inp) } render() { return ( <div> <input type='text' onChange={this.change} ref={inp=>{this.inp=inp}}/> </div> //參數(shù)inp為當(dāng)前標(biāo)簽dom元素,this指向組件 ) }
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue利用指令實(shí)現(xiàn)快速設(shè)置元素的高度
在項(xiàng)目中經(jīng)常有需要將列表的高度設(shè)置成剩余可視區(qū)域的高度,本文主要來和大家介紹一下如何通過指令和css變量的方式快速設(shè)置列表高度,希望對(duì)大家有所幫助2024-03-03vue里input根據(jù)value改變背景色的實(shí)例
今天小編就為大家分享一篇vue里input根據(jù)value改變背景色的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09ElementUI多個(gè)子組件表單的校驗(yàn)管理實(shí)現(xiàn)
這篇文章主要介紹了ElementUI多個(gè)子組件表單實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11el-date-picker設(shè)置日期默認(rèn)值兩種方法(當(dāng)月月初至月末)
這篇文章主要給大家介紹了關(guān)于el-date-picker設(shè)置日期默認(rèn)值(當(dāng)月月初至月末)的相關(guān)資料,文中通過代碼示例將解決的辦法介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08vue后臺(tái)管理添加多語言功能的實(shí)現(xiàn)示例
這篇文章主要介紹了vue后臺(tái)管理添加多語言功能的實(shí)現(xiàn)示例,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下2021-04-04詳解vue如何使用rules對(duì)表單字段進(jìn)行校驗(yàn)
這篇文章主要介紹了詳解vue如何使用rules對(duì)表單字段進(jìn)行校驗(yàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10vue實(shí)現(xiàn)多個(gè)tab標(biāo)簽頁的切換與關(guān)閉詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)多個(gè)tab標(biāo)簽頁的切換與關(guān)閉的相關(guān)資料,使用vue.js實(shí)現(xiàn)tab切換很簡(jiǎn)單,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例
本篇文章主要介紹了vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07vue watch監(jiān)控對(duì)象的簡(jiǎn)單方法示例
這篇文章主要給大家介紹了關(guān)于vue watch監(jiān)控對(duì)象的簡(jiǎn)單方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01