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

目录

一、概述 

二、获取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 = falsenew 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 = falsenew 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>

3.3. 运行效果

父组件App.vue通过ref和$refs直接调用子组件BaseForm的方法获取和重置数据。