vue 父子组件通讯--props,refs(muse-ui,vue.js2.0)

<template>
<div class="app-main">
<app-head msg="客户名称/手机号码" v-on:getSearchContent="searchTop"></app-head>

<!--子组件--客户新建的弹出框-->
<client-pop-add ref="clientPopAdd"></client-pop-add>

<!--子组件--客户修改的弹出框-->
<client-pop-update ref="clientPopUpdate" title='编辑客户' :name="updateName" :tel="updateTel" :addr="updateAddr"
:id="updateId" :index="updateIndex" :money="updateMoney" v-on:getUpdateData="updateListData"></client-pop-update>

<mu-appbar :zDepth='0' class="app-select">
<!-- 放下拉框 -->
<select slot="left" class="select">
<option value="0">全部客户</option>
<option value="1">欠款客户</option>
</select>

<button class='add-button'@click="showPop">
<i class="icon icon-加号"></i>
</button>

</mu-appbar>
<div class="tabcontent client-wrapper" id='table'>

<!--下拉刷新-->
<!--<mu-refresh-control :refreshing="refreshing" :trigger="trigger" @refresh="refresh"/>-->

<!-- 下边列表部分 -->
<mu-table :fixedFooter="fixedFooter" :fixedHeader="fixedHeader" :height="height"
:enableSelectAll="enableSelectAll" :multiSelectable="multiSelectable"
:selectable="selectable" :showCheckbox="showCheckbox" class='table-self' id='tbody'>
<mu-thead slot="header" class="app-thead">
<mu-tr>
<mu-th tooltip="序号">序号</mu-th>
<mu-th tooltip="客户名称">客户名称</mu-th>
<mu-th tooltip="手机号码">手机号码</mu-th>
<mu-th tooltip="余额">余额</mu-th>
<mu-th tooltip="收货信息">收货信息</mu-th>
<mu-th tooltip="修改"></mu-th>
</mu-tr>
</mu-thead>

<mu-tbody class="app-tbody">
<mu-tr v-for="item,index in list" :key="index">
<mu-td>{{index + 1}}</mu-td>
<mu-td>{{item.client_name}}</mu-td>
<mu-td>{{item.tel}}</mu-td>
<mu-td>{{item.money}}</mu-td>
<mu-td>{{item.addr+'id::'+item.id+'index::'+index}}</mu-td>
<mu-td>
<i data-v-d00743b8="" class="icon icon-编辑红" :id=item.id @click=showUpdate(item,index)></i>
</mu-td>
</mu-tr>
</mu-tbody>

<!--加载更多-->
<mu-infinite-scroll :scroller="scroller" :loading="loading" :loadingText='loadingText'
@load="loadMore" v-show=loading id='load-icon'/>
</mu-table>
</div>
</div>
</template>
<script>
import header from '@/components/header/header'

import clientPop from '@/components/client/client-pop'

export default {
data () {
const list = []
for (let i = 0; i < 20; i++) {
const item = {};
item.id = i;
item.client_name = 'name' + (i + 1);
item.tel = (i + 1);
item.money = (i + 1);
item.addr = i;
list.push(item);
}
return {
fixedHeader: true,
fixedFooter: true,
selectable: false,
multiSelectable: false,
enableSelectAll: false,
showCheckbox: false,
height: 'calc(100% - 42px)',
//refreshing: false,
//trigger: null,
loading: false,
scroller: null,
loadingText: '努力加载中...',
list,
num: 15,
updateName:'',
updateTel:'',
updateAddr:'',
updateId:'',
updateIndex:'',
updateMoney:''
}
},
components: {
appHead: header,
clientPopAdd:clientPop,
clientPopUpdate:clientPop
},
mounted () {
//this.trigger = document.getElementById('table');

//this.scroller = document.getElementById('tbody');
//this.scroller=document.getElementsByClassName('app-tbody')[0];
var a = document.getElementById("tbody").getElementsByTagName("div");
//console.log(a);
this.scroller = a[19];

//console.log(this.scroller);

document.getElementById('load-icon').style.width = document.body.clientWidth - 20 + 'px';//减20--滚动条影响会出现横向滚动条如果不减
console.log(document.body.clientWidth);
},
methods: {
//refresh () {
//this.refreshing = true
//console.log('refreshed!!!');
//setTimeout(() => {
// this.refreshing = false
//}, 1000)
//},
loadMore () {
console.log('loading more!!!');
this.loading = true
setTimeout(() => {
for (let i = this.num; i < this.num + 5; i++) {
const item={};
item.id=i;
item.client_name='name'+(i+1);
item.tel=(i+1);
item.money=(i+1);
item.addr=i;
this.list.push(item);
}
this.num += 5

this.loading = false
}, 2000)
},
showPop (){//点击新增，弹出客户新建框
this.$refs.clientPopAdd.toggle(true);
},
showUpdate(item,index){//弹出修改
this.$refs.clientPopUpdate.toggle(true);
this.updateName=item.client_name;
this.updateTel=item.tel;
this.updateAddr=item.addr;
this.updateId=item.id;
this.updateIndex=index;
this.updateMoney=item.money;
},
searchTop(res){
console.log('top-search-text::'+res);
},
updateListData(){
console.log(arguments);
//      this.list[0].addr='feofe';
//      this.set(this.list, 0, 'feofe');
var obj_temp={};
obj_temp.id=arguments[4];
obj_temp.client_name=arguments[0];
obj_temp.tel=arguments[1];
obj_temp.money=arguments[3];
obj_temp.addr=arguments[2];
this.list.splice(arguments[5], 1,obj_temp);
}
}
}
</script>
<style scoped>
.mu-td, .mu-th {
text-align: center;
}

.app-thead {
background: rgb(240, 240, 240);
border: 0;
}

.app-thead .mu-th,
.app-thead .mu-tr {
height: 40px;
}

.app-tbody .mu-tr {
border-bottom: 1px solid #FDDBE1;
}

.app-main .tabcontent {
height: calc(100% - 50px - 64px);
}

.table-self {
height: 100%;
}

.app-tbody {
overflow-y: scroll;
}

.mu-table {
overflow-x: hidden;
}

.app-select{
position: relative;
}
.add-button {
width: 50px;
height: 50px;
line-height: 54px;
position: absolute;
top: 0;
right: 0;
background-color: #F8637D;
border: 0;
color: white;
/*font-size: 40px;*/
/*font-weight: 100;*/
}

</style>

以上为父组件：

如下是子组件：<template><div class="pop-container"><mu-drawer right :open="open" :docked="docked" @close="toggle()" :width='350' @show="test()"><div class="line-li mr25"><i data-v-d00743b8="" class="icon icon-客户红40"></i><span class="title red">{{title}}</span></div><div class="line-li mr25"><label><span class="red needed">*</span>客户名称:</label><input type="text" v-bind:value="name" ref="input1" @input="input1"/></div><div class="line-li"><label><span class="red needed">*</span>手机号码:</label><input type="number" v-bind:value="tel" ref="input2" @input="input2"/></div><div class="line-li"><label class="tx-label"><span class="red needed notneed">*</span>收货信息:</label><textarea v-bind:value="addr" ref="input3" @input="input3"></textarea></div><div class="bottom"><button class="bg-red" v-bind:value="id" ref="button" v-bind:data-index="index" v-bind:data-money="money" @click='postUpdateData'>保存</button><button class="bg-gray" @click="toggle()">取消</button></div></mu-drawer></div></template><script>export default {name:'popClient',props: {title: {type: String,default: "新建客户"},name:{type:String,default:''},tel:{type: [String,Number],default: ''},addr:{type:[String,Number],default:''},id:{type:[String,Number],default:''},index:{type:[String,Number],default:''},money:{type:[String,Number],default:''}},data () {return {open: false,docked: true,pinput1:'',pinput2:'',pinput3:''}},methods: {toggle (flag) {this.open = !this.openthis.docked = !flag},test(){this.pinput1=this.$refs.input1.value;this.pinput2=this.$refs.input2.value;this.pinput3=this.$refs.input3.value;console.log(this.pinput1+this.pinput2+this.pinput3);},postUpdateData(){// console.log(this.pinput1+this.pinput2+this.pinput3);// var item_index=this.$refs.button;var index=this.$refs.button.dataset.index;var id=this.$refs.button.value;var money=this.$refs.button.dataset.money;this.$emit("getUpdateData", this.pinput1,this.pinput2,this.pinput3,money,id,index);this.toggle();},input1(){this.pinput1=this.$refs.input1.value;},input2(){this.pinput2=this.$refs.input2.value;},input3()aa4e{this.pinput3=this.$refs.input3.value;}}}</script><style scoped>.pop-container{position: relative;}.line-li{margin-top:35px;margin-left:25px;position: relative;}.mr25{margin-top:25px;}.icon-客户红40{font-size: 40px;}.red{color:#ff0000;}.title{display: inline-block;height:40px;line-height:40px;font-size: 16px;margin-left: 5px;}.needed{font-size: 20px;vertical-align: bottom;padding-right: 4px;padding-left: 2px;}.notneed{opacity: 0;}label{color:#666666;padding-right: 4px;}input{width: 208px;height:40px;padding-left: 5px;}textarea{width:208px;padding:5px;height:400px;resize: none;}.tx-label{position: relative;top:-385px;}.bottom{position: absolute;bottom: 0;height: 60px;line-height: 60px;border:1px solid rgb(236,225,229);border-left:0;border-right:0;width:100%;background-color:#FEF5F7;}button{height:40px;width:140px;text-align: center;line-height: 40px;color:white;border:0;border-radius: 5px;}.bg-red{background-color: #F8637D;margin-left:25px;}.bg-gray{background-color: rgb(204,204,204);position: absolute;top:10px;right:25px;}</style>

主要使用的是：子组件通过props获取父组件传过来的信息，父组件通过emit,on的方法获得子组件传的信息；

目前子组件中获取input的值是通过refs，而非v-model,如何改进有待思考