目录
[2:恰当时机,通过this.refs.xxx,获取目标标签](#2:恰当时机,通过this.refs.xxx,获取目标标签)
[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,获取目标组件
在父组件中调用子组件中的方法