vue动态绑定ref(使用变量)以及获取方式

<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>

`playBtn${data.id}`

play(data){
    this.$refs[`playBtn${data.id}`].src =  require('../../../static/images/Pause.png');
}

    // 方法一: 字符串 (废弃)
    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>
            //参数inp为当前标签dom元素，this指向组件
        )
    }