vue動態(tài)綁定ref(使用變量)以及獲取方式
vue動態(tài)綁定ref及獲取
正常情況，我們需要在vue中獲得某個dom或者組件，我們會通過綁定 ref 然后通過綁定后的名字來獲取這個dom 。
但是，如果我們在v-for中綁定ref的話，那么這個ref就會存在多個，比如我們點(diǎn)擊事件讓對應(yīng)的顯示/隱藏的話，我們很難找到這個對應(yīng)的元素。
那么，這時我們需要動態(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>這里可以看下最下面的圖片，圖片是個播放按鈕，我需要點(diǎn)擊播放按鈕，播放當(dāng)前的視頻，這里通過slot-scope綁定每一個對應(yīng)的數(shù)據(jù)（可以變相的理解為v-for循環(huán)），采用餓了么的組件庫
那么我們點(diǎn)擊對應(yīng)的圖片按鈕，就得播放對應(yīng)的視頻，那么我們得獲取到對應(yīng)的dom元素，如果綁定同樣的ref的話，那么就很難找到指定點(diǎn)擊對應(yīng)的視頻源
這里采取動態(tài)綁定ref ，命名采取 playBtn + (數(shù)據(jù)id) ，這樣每個都會綁定不同的名字
注：這里說下比較坑的一點(diǎn)，我們一般字符串加變量都會采用如下寫法
`playBtn${data.id}`但是我們綁定ref的話是需要加冒號的，但是加了之后就不需要去再采取模板字符串的寫法，直接在引號中寫入即可。
然后這里說下怎么獲?。?/strong>
正常我們綁定是 ref="name" ，獲取就是this.$refs.name ，這里的name是自己命名的，但是它會被默認(rèn)為變量，然后去找取，而不是當(dāng)做字符串處理
那么我們獲取上面動態(tài)綁定的，就不能寫 點(diǎn) 語法，可以采取方括號寫法：
play(data){
this.$refs[`playBtn${data.id}`].src = require('../../../static/images/Pause.png');
}data是上面圖片綁定的點(diǎn)擊事件傳入的，獲取到當(dāng)前的data，然后獲取到id，就可以找到指定的ref綁定的dom，然后改變播放狀態(tài)即可。
注意：之前測試是不用加下標(biāo)的，但是之后有次在另一個項(xiàng)目里寫發(fā)現(xiàn)需要加下標(biāo)，即 this.$refs[`playBtn${data.id}`][0] ，所以獲取不到的時候不妨先打印下日志，檢查下需不需要加下標(biāo)，以及有沒有獲取到對應(yīng)的ref。
看下餓了么改造的tree:
好了，如上就是動態(tài)綁定ref以及獲取的方法。
ref三種使用方法
ref
- - 給子元素綁定ref屬性，這樣父元素就能得到綁定了ref屬性的元素/組件
- - refs獲取 得到的是一個集合
- - 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指向組件
)
}
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了深入理解vue3中的reactive()，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Vue如何解決每次發(fā)版都要強(qiáng)刷清除瀏覽器緩存問題
這篇文章主要介紹了Vue如何解決每次發(fā)版都要強(qiáng)刷清除瀏覽器緩存問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue?element表格某一列內(nèi)容過多,超出省略號顯示的實(shí)現(xiàn)
這篇文章主要介紹了vue?element表格某一列內(nèi)容過多,超出省略號顯示的實(shí)現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
Vue設(shè)置瀏覽器小圖標(biāo)(ICON)的詳細(xì)步驟
vue中網(wǎng)頁圖標(biāo)默認(rèn)使用的是vue自帶的一個icon的圖標(biāo),也是vue的logo,下面這篇文章主要給大家介紹了關(guān)于Vue設(shè)置瀏覽器小圖標(biāo)(ICON)的詳細(xì)步驟,需要的朋友可以參考下2023-01-01
Props傳參v-for后TS報錯對象類型是unknow的解決方案
這篇文章主要介紹了Props傳參v-for后TS報錯對象類型是unknow的解決方案,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了vue如何給自定義的組件綁定點(diǎn)擊事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 是一個 漸進(jìn)式的javascript框架，腳手架是一個通用概念，幫助搭建項(xiàng)目的工具，本文以vue2為例結(jié)合實(shí)例代碼給大家詳細(xì)講解，感興趣的朋友跟隨小編一起看看吧2022-12-12
vue為什么v-for的優(yōu)先級比v-if高原理解析
這篇文章主要為大家介紹了vue為什么v-for的優(yōu)先級比v-if高原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
詳解Vue如何實(shí)現(xiàn)字母驗(yàn)證碼
這篇文章主要為大家介紹了Vue如何實(shí)現(xiàn)字母驗(yàn)證碼詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了解決iView Table組件寬度只變大不變小的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11