VUE 2.X
1.ref引用
1)什么是ref引用
ref用来辅助开发者在不依赖jQuery的轻快下,获取DOM元素或组件的引用.
每个vue的组件实例上,都包含一个$refs对象,里面存储这对应的DOM元素或组件的引用.默认情况下,组件的$refs指向一个空对象
2)使用示例
- 组件中给html标签添加ref属性,并且命名,名称不能重复
<div class="box2">
<h2 ref="myh2">ref测试</h2>
<button @click="showThis">打印this</button>
</div>
- 在methods方法或者其他js操作中,通过this.$refs.名称,来获取对应的DOM元素,比如:
export default {
methods:{
showThis(){
console.log(this)
console.log(this.$refs.myh2.innerHTML)
}
},
}
3)在子组件上使用ref
- 给子组件添加ref属性,并且命名为"leftComRef",示例:
<div class="box">
<Left :msg="msg" :user="user" ref="leftComRef"></Left>
<button @click="showSonCom">打印子组件元素</button>
</div>
- 父组件中获取子组件,并操作子组件数据或调用子组件方法
export default {
methods:{
showSonCom(){
console.log(this.$refs.leftComRef.message)
this.$refs.leftComRef.showMessage()
}
},
}
注:给ref属性命名的时候,最好以ref结尾,便于区分
4)this.$nextTick(callback)使用场景
组件的$nextTick(callback)方法,会把callback回调推迟到下一个DOM更新周期之后执行.
通俗的理解是:等组件的DOM更新完成之后,再执行callback回调函数.从而保证callback回调函数可以操作到最新的DOM元素.示例代码:
- 按钮1和按钮2完成显示隐藏功能,按钮添加ref属性
<div class="box3">
<button v-if="btnFlag" @click="showBtn" ref="btn1Ref">按钮1:显示按钮2</button>
<button v-else @click="showBtn">按钮2:显示按钮1</button>
</div>
- showBtn方法中使用this.$nextTick(callback)
export default {
data:{
return {
btnFlag:true
}
},
methods:{
showBtn(){
this.btnFlag = !this.btnFlag
this.$nextTick(()=>{
if(this.btnFlag){
console.log('按下了按钮2,按钮1显示了')
console.log(this.$refs.btn1Ref.innerHTML)
}
})
}
},
}
2.js数组常用方法
-
Array.