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

目录

获取dom:

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

[2:恰当时机,通过this.refs.xxx,获取目标标签](#2:恰当时机,通过this.refs.xxx,获取目标标签)

获取组件:

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

[2:通过this.refs.xxx,获取目标组件](#2:通过this.refs.xxx,获取目标组件)


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

特点:查找范围->当前组件内(更精确稳定)

获取dom:

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

javascript 复制代码
<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属性

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

获取组件:

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

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

javascript 复制代码
<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,获取目标组件

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

相关推荐
低代码布道师几秒前
CSS的三个重点
前端·css
一点媛艺1 小时前
Kotlin函数由易到难
开发语言·python·kotlin
姑苏风1 小时前
《Kotlin实战》-附录
android·开发语言·kotlin
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
奋斗的小花生2 小时前
c++ 多态性
开发语言·c++
魔道不误砍柴功2 小时前
Java 中如何巧妙应用 Function 让方法复用性更强
java·开发语言·python
闲晨2 小时前
C++ 继承:代码传承的魔法棒,开启奇幻编程之旅
java·c语言·开发语言·c++·经验分享
老猿讲编程2 小时前
一个例子来说明Ada语言的实时性支持
开发语言·ada
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
Chrikk3 小时前
Go-性能调优实战案例
开发语言·后端·golang