一、使用ref的原因:
原生js获取DOM元素是很麻烦的,需要用如:document.getElementById这么长的API来获取,于是jQuery应运而生,$(“#id”)的使用使我们的操作变得简便起来。但是jQuery仅仅是库(插件),不能够用来搭建框架。于是vue可以帮我们解决这个问题,vue也有自带的获取DOM的方法,那就是ref。它不仅可以获取DOM元素还可以获取组件。
二、ref有三种作用:
- ref 加在普通元素上,用this.$refs.name 获取到的是dom元素
- ref 加在子组件上,用this.$refs.name 获取到的是组件实例,可以使用组件的所有方法
- 将v-for和ref结合使用时,获取到的this.$refs.属性是数组
(1) 获取DOM,操作DOM( ref 加在普通元素上,用this.$refs.name 获取到的是dom元素)
1、给dom节点记上ref属性,可以理解为给dom节点起了个名字。
2、加上ref之后,在$refs属性中多了这个元素的引用。
3、通过vue实例的$refs属性拿到这个dom元素
<div id="box" ref="refdiv"> haha</div>
<div id="box2" ref="refdiv2"> haha</div>
//这些元素最早可以在mounted声明函数中获得
mounted(){
this.$refs.refdiv.style.color = 'red'//修改box的字体颜色
}
(2)、获取组件,拿到组件中的变量和方法
1、给组件记上ref属性,可以理解为给组件起了个名字。
2、加上ref之后,在$refs属性中多了这个组件的引用。
3、通过vue实例的$refs属性拿到这个组件的引用,之后可以通过这个引用调用子组件的方法,或者获取子组件的数据。
<son id="son2" ref="son2"></son>
<template id="son">
<div>
son
<button @click="log1">按钮</button>
</div>
</template>
Vue.component("son",{
template:"#son",
data(){
return{
msg:"hello"
}
},
methods:{
log1(){
console.log(1);
}
}
})
data: {
sonmsg:""
},
mounted() {
this.sonmsg = this.$refs.son2.msg
//调用组件中的方法
this.$refs.son2.log1()
},
也可以通过给变量赋值的方法,展示该组件中的内容。
(3)、vue2中使用ref获取v-for的元素时,获取到的是一个数组。
<template>
<div>
<div ref="btn" v-for="(item , index) in 3" :key="index">我是一个按钮</div>
</div>
</template>
<script>
export default {
name: 'App',
mounted() {
//获取到的是一个元素数组
console.log(this.$refs.btn);
}
}
</script>
三、注意
1.ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用。
2.如果ref 是通过v-for 循环出来的,有多个重名,那么ref的值会是一个数组 ,此时要拿到单个的ref 只需要循环就可以了。