当前位置：首页 > article >正文

第二十六章 Vue之在当前组件范围内获取dom元素和组件实例

article 2024/11/8 19:19:08

一、概述

二、获取dom

2.1. 具体步骤

2.2. 完整代码

2.2.1. main.js

2.2.2. App.vue

2.3. BaseChart.vue

三、获取组件实例

3.1. 具体步骤

3.2. 完整代码

3.2.1. main.js

3.2.2. App.vue

3.2.3. BaseForm.vue

3.3. 运行效果

一、概述

我们过去在想要获取一个dom元素的时候，一般会使用到document.querySelector('class样式')这种全页面范围的查找方式。如果在页面比较复杂（如有多个组件且可能存在相同样式）的情况下，通过这种方式就获取就难以定位一个dom元素。因此Vue为我们提供了ref和$refs。

querySelector 查找范围 → 整个页面

作用：利用ref和$refs可以用于获取dom元素或组件实例。

特点：查找范围 → 当前组件内 (更精确稳定)

二、获取dom

2.1. 具体步骤

1. 目标标签 – 添加 ref 属性

2. 恰当时机, 通过 this.$refs.xxx, 在当前组件内查找获取目标标签

2.2. 完整代码

2.2.1. main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

2.2.2. App.vue

<template>
  <div class="app">
    <div class="base-chart-box">
      这是一个捣乱的盒子
    </div>
    <BaseChart></BaseChart>
  </div>
</template>

<script>
import BaseChart from './components/BaseChart.vue'
export default {
  components:{
    BaseChart
  }
}
</script>

<style>
.base-chart-box {
  width: 300px;
  height: 200px;
}
</style>

2.3. BaseChart.vue

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

三、获取组件实例

3.1. 具体步骤

作用：利用 ref 和 $refs 可以用于获取 dom 元素, 或组件实例

② 获取组件：

1. 目标组件 – 添加 ref 属性

2. 恰当时机, 通过 this.$refs.xxx, 获取目标组件，

就可以调用组件对象里面的方法

3.2. 完整代码

3.2.1. main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

3.2.2. App.vue

<template>
  <div class="app">
    <BaseForm ref="baseForm"></BaseForm>
    <button @click="handleGet">获取数据</button>
    <button @click="handleReset">重置数据</button>
  </div>
</template>

<script>
import BaseForm from './components/BaseForm.vue'
export default {
  data () {
    return {

    }
  },
  methods: {
    handleGet () {
      console.log(this.$refs.baseForm.getValues())
    },
    handleReset () {
      this.$refs.baseForm.resetValues()
    }
  },
  components:{
    BaseForm
  }
}
</script>

<style>

</style>

3.2.3. BaseForm.vue

<template>
  <form action="">
    账号：<input type="text" v-model="account"/><br><br>
    密码：<input type="text" v-model="password"/><br><br>
  </form>
</template>

<script>
export default {
  data () {
    return {
      account: '',
      password: ''
    }
  },
  methods: {
    // 1. 收集表单数据，返回一个对象
    getValues () {
      return {
        account: this.account,
        password: this.password
      }
    },
    // 2. 重置表单
    resetValues () {
      this.account = '',
      this.password = ''
    }
  }
}
</script>

<style scoped>
.base-chart-box {
  width: 400px;
  height: 300px;
  border: 3px solid #000;
  border-radius: 6px;
}
</style>