vue2中ref的使用

thinkQuadratic

已于 2025-03-03 21:16:38 修改

阅读量626

点赞数 20

文章标签： vue.js javascript 前端

于 2025-03-03 21:08:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46541579/article/details/145999011

版权

在vue中，ref是一个比较实用的特性，它允许开发者直接操作dom元素或者子组件的方法。

获取dom元素

这里通过ref获取两个dom元素

<template>
   <div>
    <input type="text" ref="myinput" >
    <div class="box" ref="mybox"></div>
   </div>

    
</template>

<script>
export default {
  

   mounted(){
     // 这里打印this.$refs 可以看到获取到的dom元素
     console.log('refs',this.$refs);
    //  box的属性
    var box=this.$refs.mybox;
    console.log('width',box.clientWidth);
    console.log('height',box.clientHeight);
    console.log('name',box.className);
     // 获取到dom元素 并调用获取焦点方法。注意在写mounted生命函数中 确保dom元素加载完成
     this.$refs.myinput.focus();
   }
}
</script>

<style>
.box{
    width: 200px;
    height: 100px;
    background-color: skyblue;
}
</style>

打印结果

调用子组件方法

<template>
  <div>
    <SonCompnonet ref="myConponet"></SonCompnonet>
    <button @click="numadd">调用子组件num++方法</button>
  </div>
</template>

<script>
// 引入子组件
import SonCompnonet from '@/components/SonCompnonet.vue';

export default {
    components: {
        SonCompnonet
  },
   methods:{
    numadd(){
      // 调用子组件方法
      console.log('this.$refs.myConponet',this.$refs.myConponet);
      this.$refs.myConponet.numAdd();
    }
   },
}
</script>

打印结果，这里可以看到 numAdd方法，调用即可让子组件中的num++

与第三方库集成，这里使用echats

<template>
  <div>
    <div ref="chartContainer" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    mounted() {
  
  // 获取 DOM 容器
  const chartDom = this.$refs.chartContainer;
  // 初始化 ECharts 实例
  const myChart = echarts.init(chartDom);
  // 配置图表选项
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }
    ]
  };
  // 使用配置项显示图表
   myChart.setOption(option);
}
}
</script>

<style>

</style>

end（如有误欢迎指正）