欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue動(dòng)態(tài)綁定ref(使用變量)以及獲取方式

 更新時(shí)間：2022年08月31日 10:01:41   作者：壞丶毛病  
這篇文章主要介紹了vue動(dòng)態(tài)綁定ref(使用變量)以及獲取方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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)文章

最新評(píng)論