在此我們必須先明確知道什么是ref， ref 是 reference 引用 DOM操作進(jìn)行父子通信，在vuejs 里面作者不建議進(jìn)行DOM操作，把DOM操作都換成指令。
平時(shí)我們收集數(shù)據(jù)是通過(guò)v-model來(lái)的吧，舉個(gè)簡(jiǎn)單的例子
<body>
<div id="box">
用戶(hù)名：<input type="text" v-model="username">
<hr>
郵箱：<input type="text" v-model="email">
<button id="btn" @click="saveMesg">查看數(shù)據(jù)</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data:{
username:'',
email:''
},
methods:{
saveMesg:function () {
console.log(this.email);
console.log(this.username);
}
},
components:{
}
})
</script>
這樣點(diǎn)擊顯示用戶(hù)信息就能顯示出輸入框相應(yīng)的數(shù)據(jù)，但能否不用v-model操作呢？是可以的，只要寫(xiě)成這樣
<div id="box">
用戶(hù)名：<input type="text" ref="username">
<hr>
郵箱：<input type="text" ref="email">
<button id="btn" @click="saveMesg">查看數(shù)據(jù)</button>
</div>
同時(shí)將方法改成
methods:{
saveMesg:function () {
// console.log(this.email);
console.log(this.$refs);
}
這個(gè)this.refs.png](https://upload-images.jianshu.io/upload_images/19871099-1b369d6d07704c57.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
我們可以通過(guò)這種方式獲得輸入框的值
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:{
}
})
所以我們也就可以利用拿到了這個(gè)值做父子通信了。
<body>
<div id="box">
<p>父組件</p>
<button @click="clickhandler">點(diǎn)我顯示子組件信息</button>
<p>顯示子組件信息{{username}}</p>
<son ref="username"></son>
</div>
<script type="text/javascript">
var son={
data:function(){
return {sonMsg:''}
},
template:`<div>用戶(hù)名：<input type="text" v-model="sonMsg"></div>`
}
var vm = new Vue({
el: '#box',
data:{
username:'',
},
methods:{
clickhandler:function(){
console.log(this.$refs.username.sonMsg);//子組件的實(shí)例
}
},
components:{
son
}
})
</script>
</body>
經(jīng)過(guò)很多次實(shí)驗(yàn)，不知道為什么很多都是undefined，所以只能將ref綁定在調(diào)用的時(shí)候，輸入框還是要用v-model來(lái)監(jiān)聽(tīng)數(shù)據(jù)的，只是找對(duì)應(yīng)的值的時(shí)候比較復(fù)雜。
methods:{
clickhandler:function(){
this.username=this.$refs.username.sonMsg
// console.log(this.$refs.username.sonMsg);//子組件的實(shí)例
}
},
，子組件如何給父組件傳遞信息呢？
那我們依舊還是利用事件的傳遞，在子組件添加一個(gè)按鈕，點(diǎn)擊后綁定一個(gè)事件
var son={
methods:{
clickHandle:function () {
//子組件也提供了一個(gè)獲取父組件
console.log(this.$parent);
}
},
data:function(){
return {sonMsg:''}
},
template:`<div>用戶(hù)名：<input type="text" v-model="sonMsg">
<button @click="clickHandle">兒子給父親傳遞信息 </button>
</div>`
}
點(diǎn)擊按鈕我們就可以看到打印的內(nèi)容
,我們也可以拿到跟組件
我們可以在父組件定義一個(gè)回調(diào)函數(shù)，用于接受子組件傳遞過(guò)來(lái)的數(shù)據(jù)
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);//子組件的實(shí)例
}
},
components:{
son
}
})
子組件在負(fù)責(zé)把數(shù)據(jù)發(fā)送給父組件
var son={
methods:{
clickHandle:function () {
//子組件也提供了一個(gè)獲取父組件
// console.log(this.$parent);
this.$parent.sonCallBack('來(lái)自子組件的數(shù)據(jù)哦',this.sonMsg)
}
},
data:function(){
return {sonMsg:''}
},
template:`<div>用戶(hù)名：<input type="text" v-model="sonMsg">
<button @click="clickHandle">兒子給父親傳遞信息 </button>
</div>`
}
最后一起顯示在頁(yè)面上
<div id="box">
<p>父組件</p>
<button @click="clickhandler">點(diǎn)我顯示子組件信息</button>
<p>顯示子組件信息{{username}}</p>
<son ref="username"></son>
<h1>子組件給父組件消息：{{sonMsg}}</h1>
</div>
