高师本科化学实验教学体系建设与创新型人才培养 教学成果奖申报网站,湘潭专业seo优化价格,软件开发者路线图,互联网开发工程师证书1.作用
利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例#xff0c;也可以在父组件获取子组件#xff0c;从而调用子组件的方法。
2.特点#xff1a;
查找范围 → 当前组件内(更精确稳定)
3.语法
1.给要获取的盒子添加ref属性
div refchartRef也可以在父组件获取子组件从而调用子组件的方法。
2.特点
查找范围 → 当前组件内(更精确稳定)
3.语法
1.给要获取的盒子添加ref属性
div refchartRef我是渲染图表的容器/div2.获取时通过 $refs获取 this.$refs.chartRef 获取
mounted () {console.log(this.$refs.chartRef)
}4.注意
之前只用document.querySelect(‘.box’) 获取的是整个页面中的盒子 App.vue
template
div classbox/div
Good/Good如果Good.vue中有一个class“box”,在App中通过document.querySelect(.box)的方式只能获取到第一个classbox的元素。
5.代码示例
App.vue
templatediv classappBaseChart refbaseChart/BaseChartbutton clickchangeNumber更新/button/div
/templatescript
import BaseChart from ./components/BaseChart.vue
export default {methods:{changeNumber(){this.$refs.baseChart.changeNum()}},components:{BaseChart}
}
/scriptstyle
/styleBaseChart.vue
templatediv idchartdiv classbase-chart-box refbaseChartBox子组件/divp{{ number }}/p/div
/templatescript
// yarn add echarts 或者 npm i echarts
import * as echarts from echartsexport 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],},],})},
}
/scriptstyle scoped
.base-chart-box {width: 400px;height: 300px;border: 3px solid #000;border-radius: 6px;
}
/style示例代码在父组件中直接调用子组件的方法进行数字的更新。
