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 == ){

if(e.data.length > ){

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>

巴特西

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

最新文章

热门文章