ref：绑定dom节点，拿到的就是dom对象；
ref：绑定组件，拿到的就是组件对象；
ref绑在dom节点上：
//绑在dom上，
<input type="text" ref="mytext">
<input type="text" ref="myusername">//this.$refs拿到的是原生dom节点
console.log(this.$refs)结果：
console.log(this.$refs.mytext,this.$refs.myusername)分别拿到两个input dom节点：
完整代码：
<body><div id="box"><input type="text" ref="mytext"><input type="text" ref="myusername"><button @click="handleAdd">add</button></div><script>new Vue({el:"#box",methods:{handleAdd(){console.log(this.$refs.mytext,this.$refs.myusername)}}})</script>
</body>结果：
ref绑在组件上：
//绑在组件上
<child ref="mychild"></child>//this.$refs.mychild获取的是组件对象，里面有很多组件里的属性方法
console.log(this.$refs.mychild)结果：
我们在组件里定义一个状态：myname，通过“this.$refs.mychild”就能拿到整个组件对象，所以组件对象里的状态也就可以用访问了：
console.log(this.$refs.mychild.myname)这样别的组件也就能拿到 child 组件上的状态了；
完整代码：
<body><div id="box"><button @click="handleAdd">add</button><child ref="mychild"></child></div><script>Vue.component("child",{template:`<div>child</div>`,data(){return {myname:"child-11111"}}})new Vue({el:"#box",methods:{handleAdd(){console.log(this.$refs.mychild.myname)}}})</script>
</body>结果：
- 其他的组件也可以改这个状态；；
ref的缺点：
因为ref虽然能实现组件之间的通信，但是会造成数据流流向的紊乱，所以一般不用；
组件之间的通信有几种：
- 父传子--通过自定义属性（兄弟之间的通信通过父组件中间人）
- 子传父--通过自定义事件
- bus方式--发布者、订阅者
- vuex方式
- ref方式--打破组件间的壁垒，直接拿来用
