vue中ref和$refs

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>

示例代码在父组件中直接调用子组件的方法进行数字的更新。