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.open
      this.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(){
      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,如何改进有待思考