在此我们必须先明确知道什么是ref， ref 是 reference 引用 DOM操作进行父子通信，在vuejs 里面作者不建议进行DOM操作，把DOM操作都换成指令。
平时我们收集数据是通过v-model来的吧，举个简单的例子
用户名：
邮箱：
这样点击显示用户信息就能显示出输入框相应的数据，但能否不用v-model操作呢？是可以的，只要写成这样
用户名：
邮箱：
同时将方法改成
methods:{
saveMesg:function () {
// console.log(this.email);
console.log(this.$refs);
}
这个this.refs.png](https://upload-images.jianshu.io/upload_images/19871099-1b369d6d07704c57.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
我们可以通过这种方式获得输入框的值
var vm = new Vue({
el: '#box',
data:{
username:'',
email:''
},
methods:{
saveMesg:function () {
// console.log(this.email);
var eamil=this.$refs.email.value;
var username=this.$refs.username.value;//找到值
}
},
components:{
}
})
所以我们也就可以利用拿到了这个值做父子通信了。
父组件
显示子组件信息{{username}}
经过很多次实验，不知道为什么很多都是undefined，所以只能将ref绑定在调用的时候，输入框还是要用v-model来监听数据的，只是找对应的值的时候比较复杂。
methods:{
clickhandler:function(){
this.username=this.$refs.username.sonMsg
// console.log(this.$refs.username.sonMsg);//子组件的实例
}
},
监听到子组件信息.png
，子组件如何给父组件传递信息呢？
那我们依旧还是利用事件的传递，在子组件添加一个按钮，点击后绑定一个事件
var son={
methods:{
clickHandle:function () {
//子组件也提供了一个获取父组件
console.log(this.$parent);
}
},
data:function(){
return {sonMsg:''}
},
template:`用户名：
`
}
点击按钮我们就可以看到打印的内容
,我们也可以拿到跟组件
el.png
我们可以在父组件定义一个回调函数，用于接受子组件传递过来的数据
var vm = new Vue({
el: '#box',
data:{
username:'',
sonMsg:''
},
methods:{
sonCallBack:function(data){
this.sonMsg=data
},
clickhandler:function(){
this.username=this.$refs.username.sonMsg
// console.log(this.$refs.username.sonMsg);//子组件的实例
}
},
components:{
son
}
})
子组件在负责把数据发送给父组件
var son={
methods:{
clickHandle:function () {
//子组件也提供了一个获取父组件
// console.log(this.$parent);
this.$parent.sonCallBack('来自子组件的数据哦',this.sonMsg)
}
},
data:function(){
return {sonMsg:''}
},
template:`用户名：
`
}
最后一起显示在页面上
父组件
显示子组件信息{{username}}
子组件给父组件消息：{{sonMsg}}