vue中使用ref绑定元素

一、使用ref的原因：

原生js获取DOM元素是很麻烦的，需要用如：document.getElementById这么长的API来获取，于是jQuery应运而生，$(“#id”)的使用使我们的操作变得简便起来。但是jQuery仅仅是库（插件），不能够用来搭建框架。于是vue可以帮我们解决这个问题，vue也有自带的获取DOM的方法，那就是ref。它不仅可以获取DOM元素还可以获取组件。

二、ref有三种作用：

1. ref 加在普通元素上，用this.$refs.name 获取到的是dom元素
2. ref 加在子组件上，用this.$refs.name 获取到的是组件实例，可以使用组件的所有方法
3. 将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 只需要循环就可以了。