1.作用
利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例,也可以在父组件获取子组件,从而调用子组件的方法。
2.特点:
查找范围 → 当前组件内(更精确稳定)
3.语法
1.给要获取的盒子添加ref属性
<div ref="chartRef">我是渲染图表的容器</div>
2.获取时通过 $refs获取 this.$refs.chartRef 获取
mounted () {
console.log(this.$refs.chartRef)
}
4.注意
之前只用document.querySelect(‘.box’) 获取的是整个页面中的盒子,
App.vue
<template>
<div class="box"></div>
<Good></Good>
如果Good.vue中有一个class=“box”,在App中通过document.querySelect(".box")
的方式只能获取到第一个class="box"的元素。
5.代码示例
App.vue
<template>
<div class="app">
<BaseChart ref="baseChart"></BaseChart>
<button @click="changeNumber">更新</button>
</div>
</template>
<script>
import BaseChart from './components/BaseChart.vue'
export default {
methods:{
changeNumber(){
this.$refs.baseChart.changeNum()
}
},
components:{
BaseChart
}
}
</script>
<style>
</style>
BaseChart.vue
<template>
<div id="chart">
<div class="base-chart-box" ref="baseChartBox">子组件</div>
<p>{{ number }}</p>
</div>
</template>
<script>
// yarn add echarts 或者 npm i echarts
import * as echarts from 'echarts'
export default {
data(){
return {
number: 100
}
},
methods:{
changeNum(){
this.number = 200
}
},
mounted() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.querySelect('.base-chart-box'))
// 绘制图表
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>
示例代码在父组件中直接调用子组件的方法进行数字的更新。