第二十六章 Vue之在当前组件范围内获取dom元素和组件实例
目录
一、概述
我们过去在想要获取一个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>3.3. 运行效果
父组件App.vue通过ref和$refs直接调用子组件BaseForm的方法获取和重置数据。
原文地址：https://blog.csdn.net/qushaming/article/details/143457943
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！