ref的使用

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

一、获取DOM，操作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的字体颜色
}

二、获取组件，拿到组件中的变量和方法

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()
 
            },