vue watch/ computed的应用（做一个简单的父子之间的传递/电话号码的搜索）

                

 

 

 

 

  　　　　　父组件中当点击搜索的时候请求接口，然后把新的数据用　computed 传递给子组件

<van-search

v-model="onSeachPhone"
                show-action
                placeholder="请输入电话号码后四位"
                @search="onSearchPhone"
                @clear="onCancelPhone"
                >
                <template #action>
                    <div @click="onSearchPhone">查询</div>
                </template>
                </van-search>
              <seachPhone  @history ="history" :phoneLists ="phoneLists" @PHides='PHides' :phoneHide='phoneHide' />
　　　　<script>
　　　　　export default {

    components:{

        seachPhone,

   

    },

    data(){

        return{

            // maxDate: new Date(2900, 0, 31),

        

          

            phoneHide:false,

            phoneList:[],

            typeHide:false,

         

       

            

        }

    },

   

    computed:{

      phoneLists(){

        return this.phoneList

      },

    

    },

    methods:{

        history(val){

             this.userName = val.guestname;//客人姓名

             this.phone = val.telphone;//电话号码

             this.phoneHide = false;

        },

          PHides(val){

            console.log(val)

            this.phoneHide = val;

        },

        onSearchPhone(a){

            if(this.onSeachPhone != ''){

                console.log(this.onSeachPhone)

                SearchWine({

                    tel:this.onSeachPhone 

                })

                .then((e)=>{

                    if( e.code == 0 ){

                        if(e.data.length > 0 ){

                            this.phoneList = e.data;

                            this.phoneHide = true;

                        }

                    }else{

                        this.$msg({

                            text:e.msg,

                            type:'info'

                        })

                    }

                })

            }else{

                this.$msg({

                    text:'都没输入你在摁什么？',

                    type:'info'

                })

            }

        　　　　</script>

 子组件中用watch 监听 phoneList 改变然后从新赋值在子组件点击的时候利用 this.$emit('方法名',参数)。　　　

<template>
    <div class="">
         <div class="card_model"  v-if="phoneHide">
            <div class="card-bock" >
                <div class="titles">
                    <span class="model_juese">存酒记录</span>
                    <img @click="PHides"  class="right imgright" src="@/assets/img/btn_close.png" alt="">
                </div>
                <div class="cardconter">
                    <div class="spanul">
                        <span>记录</span>
                            <ul class="ulactive van-tree-select__nav"> 
                                <li v-for="(a,b) in phoneListsaa" :key="b"  @click="history(a)">
                                    <span class="left">名字：{{a.guestname}}</span>
                                    <span class="right">电话：{{a.telphone}}</span>
                                </li>
                              
                            </ul>
                    </div>
                    <!-- <div class="spanul">
                        <span>会员</span>
                        <ul class="ulactive van-tree-select__nav"> 
                            <li> 11111</li>
                        </ul>
                    </div> -->
                </div>
            </div>
     </div>
    </div>
</template>
<script>
export default {
   props:{
       phoneHide:{
           type:Boolean,
           default:()=>{}
       },
       phoneLists:{
           type:Array,
           default:()=>[]
       }
   },

   watch:{
       phoneLists(a){
           this.phoneListsaa = a
       }
   },
   methods:{
       PHides(){
           this.$emit('PHides',false)
       },
       history(a){
           this.$emit('history',a)
       }
   },
    data(){
        return{
            phoneListsaa: this.phoneLists,
            shows:true,
        }
    }
}
</script>
<style scoped>
.spanul span{
        padding: 6px;
    min-height: 34px;
    line-height: 34px;
    display: block;
}
.spanwindt{
    width: 30.333%;
    display: inline-block;
    text-align: center;
    border:1px solid rgba(66,139,202, .3);
    margin: 1%;
    color:#428BCA;
    min-height: 34px;
    line-height: 34px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
     
}
.ulactive li:nth-child(odd){
    background: rgba(66, 139, 202, .03);
}
.bgccc{
background: #428BCA;
color: #fff;
}
.model_juese{
    font-size: 16.2px;
    margin: 0 auto;
    display: block;
    text-align: center;
  border-bottom: 1px solid rgba(235,235,235,.6);
    padding-bottom: 15px;
    padding-top: 15px;
}
.card_model{
    position: fixed;
    background: rgba(0,0,0,.7);
    z-index: 888;
    width: 100%;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
}
.radiobtn{
    width: 175px;
    height: 40px;
    color: #fff;
    background: #428BCA;
    display: block;
    text-align: center;
    margin: 0 auto;
    border:none;
    border-radius: 6px;
   position: absolute;
    bottom: 5%;
    left: 24%;
        /* margin-top: 231px; */
}
.cardconter{
   position: relative;
   width: 100%;
}
.imgright{
    position: absolute;
    right: 4%;
    top: 4%;
    display: block;
}
.card-bock{
    width: 90%;
    height: 500px;
   background: #fff;
   display: block;
   margin: 0 auto;
   position: relative;
   border-radius: 10px;
   top: 6%;
   overflow-y: auto;
}
 .ulactive{
     height: 200px;

 }
 .ulactive li{
     padding: 6px;
     min-height: 34px;
        line-height: 34px;
        border-bottom: 1px solid rgba(235,235,235,.3);
        background: #F7F7F7FF;
 }
 .ulactive .activeLI{
    background: rgba(66,139,202, .3);
    color: #428BCA;
}
.van-search__content{
     border: 1px solid #F7F8FA;
     background: #fff;
}
.van-search .van-cell{
    background: #fff;
}
.ulright{
    background: #ffffff;
    width: 65%;
    display: inline-block;
    float: right;
    position: fixed;
    right: 5%;
    font-size: 13px;
      height:71%;
    overflow-y: auto;
}
.rightconter li {
    color: #666666;
    font-size: 13px;
    font-family: PingFang-SC-Medium;
    padding: 6px;
    line-height: 34px;
    min-height: 34px;
    width: 95.5%;
    position: relative;
}
.bgcolor .listli {
    padding: 15px 15px;
}
.bgcolor li:nth-child(odd){
    background: rgba(66, 139, 202, .03);
}
.bgcolor li:nth-child(even){
    background: #FFFFFFFF;
}
</style>