使用ref和$refs获取dom和组件

女爷i 2024-02-05 14:47 58阅读 0赞

**目录**

获取dom：

1：目标标签-添加ref属性

2：恰当时机，通过this.$refs.xxx，获取目标标签

获取组件：

1：目标组件-添加ref属性

2：通过this.$refs.xxx，获取目标组件

--------------------

**作用：利用ref和$refs进行获取dom元素或者组件实例**

**特点：查找范围->当前组件内（更精确稳定）**

### 获取dom： ###

示例代码：导入echarts图表通过ref获取dom将图表呈现在该dom元素中

<template>
      <div class="base-chart-box" ref="baseChartBox">子组件</div>
    </template>
    
    <script>
    import * as echarts from 'echarts'
    
    export default {
      mounted() {
        // 基于准备好的dom，初始化echarts实例
        // document.querySelector 会查找项目中所有的元素
        // $refs只会在当前组件查找盒子
        // var myChart = echarts.init(document.querySelector('.base-chart-box'))
        var myChart = echarts.init(this.$refs.baseChartBox)
        // 绘制图表
        myChart.setOption({
          title: {
            text: 'ECharts 入门示例',
          },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20],
            },
          ],
        })
      },
    }
    </script>
    
    <style scoped>
    .base-chart-box {
      width: 400px;
      height: 300px;
      border: 3px solid #000;
      border-radius: 6px;
    }
    </style>

#### 1：目标标签-添加ref属性 ####

在你想要获取的dom对象上面添加ref属性

![863811b66b96450aae18b4bbaaaaf63a.png][]

#### 2：恰当时机，通过this.$refs.xxx，获取目标标签 ####

![9049f3fd79284754a119c7a643305634.png][]

### 获取组件： ###

#### 1：目标组件-添加ref属性 ####

编写一个组件BaseFrom.vue，在父组件App.vue中调用BaseFrom.vue子组件中的方法

<template>
      <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>登录表单</span>
          </div>
          <div>
              用户名:<el-input v-model="userFrom.username" placeholder="请输入内容"></el-input>
              密码:<el-input v-model="userFrom.password" placeholder="请输入内容"></el-input>
               <el-button type="primary" @click="login" style="margin-top: 30px">获取数据</el-button>
                <el-button type="primary"  @click="resert">重置数据</el-button>
          </div>
        </el-card>
      </div>
    </template>
    
    <script>
    export default {
      name: "WORKSPACE_NAMEBaseFrom",
    
      data() {
        return {
            userFrom:{
                username:'',
                password:''
            }
        };
      },
    
      mounted() {},
    
      methods: {
          login(){
              console.info('获取数据', this.userFrom)
          },
          resert(){
              this.userFrom.username = ''
              this.userFrom.password = ''
          }
      }
    };
    </script>
    
    <style scoped>
    .text {
        font-size: 14px;
      }
    
      .item {
        margin-bottom: 18px;
      }
    
      .clearfix:before,
      .clearfix:after {
        display: table;
        content: "";
      }
      .clearfix:after {
        clear: both
      }
    
      .box-card {
        width: 480px;
      }
    </style>

#### 2：通过this.$refs.xxx，获取目标组件 ####

在父组件中调用子组件中的方法

![08ac87e26ad64f289ddeb9bcf707fb6f.png][]

[863811b66b96450aae18b4bbaaaaf63a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/d68a68ccbfd2414e9e8a9ee03a22d164.png
[9049f3fd79284754a119c7a643305634.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/be9088b2b9604f8c8dcc3371c83057d8.png
[08ac87e26ad64f289ddeb9bcf707fb6f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/472020265c324cd381e98870ea5b17d0.png