卑鄙的网站开发公司,wordpress主题好看的,徐州模板建站系统,免费云服务器主机ref和$refs
1.作用
利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例
2.特点#xff1a;
查找范围 → 当前组件内(更精确稳定)
3.语法
1.给要获取的盒子添加ref属性
div refchartRef我是渲染图表的容器/div
2.获取时通过 $refs获取 …ref和$refs
1.作用
利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例
2.特点
查找范围 → 当前组件内(更精确稳定)
3.语法
1.给要获取的盒子添加ref属性
div refchartRef我是渲染图表的容器/div
2.获取时通过 $refs获取 this.$refs.chartRef 获取
mounted () {console.log(this.$refs.chartRef)
}
4.注意
之前只用document.querySelect(.box) 获取的是整个页面中的盒子 5.代码示例
App.vue
templatediv classappBaseChart/BaseChart/div
/template
script
import BaseChart from ./components/BaseChart.vue
export default {components:{BaseChart}
}
/script
style
/style
BaseChart.vue
templatediv classbase-chart-box refbaseChartBox子组件/div
/template
script
// yarn add echarts 或者 npm i echarts
import * as echarts from echarts
export default {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 异步更新 $nextTick
1.需求
编辑标题, 编辑框自动聚焦 点击编辑显示编辑框 让编辑框立刻获取焦点 2.代码实现
templatediv classappdiv v-ifisShowEditinput typetext v-modeleditValue refinp /button确认/button/divdiv v-elsespan{{ title }}/spanbutton clickeditFn编辑/button/div/div
/template
script
export default {data() {return {title: 大标题,isShowEdit: false,editValue: ,}},methods: {editFn() {// 显示输入框this.isShowEdit true // 获取焦点this.$refs.inp.focus() } },
}
/script 3.问题
显示之后立刻获取焦点是不能成功的
原因Vue 是异步更新DOM (提升性能) 4.解决方案
$nextTick等 DOM更新后,才会触发执行此方法里的函数体
语法: this.$nextTick(函数体)
this.$nextTick(() {this.$refs.inp.focus()
})
注意$nextTick 内的函数体 一定是箭头函数这样才能让函数内部的this指向Vue实例
