父组件中当点击搜索的时候请求接口,然后把新的数据用 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的应用(做一个简单的父子之间的传递/电话号码的搜索)的更多相关文章

  1. MUI框架-05-用MUI做一个简单App

    MUI框架-05-用MUI做一个简单App MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有 ...

  2. Vue.js 入门:从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

  3. 使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换

    使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...

  4. 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...

  5. 使用React并做一个简单的to-do-list

    1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...

  6. 【 D3.js 入门系列 --- 3 】 做一个简单的图表!

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  7. 一起用HTML5 canvas做一个简单又骚气的粒子引擎

    前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...

  8. Jmeter初步使用二--使用jmeter做一个简单的性能测试

    经过上一次的初步使用,我们懂得了Jmeter的安装与初步使用的方法.现在,我们使用Jmeter做一个简单的性能测试.该次测试,提交的参数不做参数化处理,Jmeter各元件使用将在介绍在下一博文开始介绍 ...

  9. 用EF DataBase First做一个简单的MVC3报名页面

    使用EF DataBase First做一个简单的MVC3报名网站 ORM(Object Relational Mapping)是面向对象语言中的一种数据访问技术,在ASP.NET中,可以通过ADO. ...

随机推荐

  1. 题解 洛谷 P3340 【[ZJOI2014]星系调查】

    根据题意,发现题目中的图,其实就是一颗树或者是一颗基环树,每个节点上有一个点对\((x,y)\),每次询问为给定端点,找一条直线到端点间的所有点的距离之和最小. 设这条直线为\(y=kx+b\),根据 ...

  2. React Navigation / React Native Navigation 多种类型的导航结合使用,构造合理回退栈

    React Navigation 更新到版本5已经是非常完善的一套导航管理组件, 提供了Stack , Tab , Drawer 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈 ...

  3. vue学习(三) v-bind指令

    //html <div id="app"> <input type="button" value="ok" v-bind: ...

  4. BUUCTF-web NiZhuanSiWei

    上源码: file_get_contents读文件,text参数用php://input发送字符串.file参数值为被包含文件的文件名 成功执行第一个if,紧接着用php://filter/read= ...

  5. 简单理解:数据库的一致性与四种隔离级别(+MySQL实现)

    并行数据库存在着几种常见不一致问题: 1.更新丢失:两个并发的写进程同时修改某内容,一个没修改完提交之后另一个又提交,导致其覆盖了第一个提交的写进程内容. 2.脏读:一个操作读到了另外一个操作没有提交 ...

  6. vb教程图文并茂

    https://blog.csdn.net/baimafujinji/article/details/70198953

  7. Java 构造方法及关键字:this、super、final、static

    一.构造方法 1.概念 在创建对象时,需要明确对象的属性值,即当使用new关键字创建对象时,同时给对象的属性初始化值. 这就需要用到构造方法.构造方法的格式: 修饰符 构造方法名(参数列表){ } 构 ...

  8. Nginx配置各种响应头防止XSS,点击劫持,frame恶意攻击

    为什么要配置HTTP响应头? 不知道各位有没有被各类XSS攻击.点击劫持 (ClickJacking. frame 恶意引用等等方式骚扰过,百度联盟被封就有这些攻击的功劳在里面.为此一直都在搜寻相关防 ...

  9. UltraISO制作系统安装盘

    转载自: 原文链接 本文介绍使用UltraISO(软碟通)制作U盘启动来安装Win10系统,会装win10,其他的系统也大同小异,适用于当原系统损坏.崩溃.升级异常导致系统不能开机时重装,相对比< ...

  10. PHP is_bool() 函数

    is_bool() 函数用于检测变量是否是布尔型.高佣联盟 www.cgewang.com PHP 版本要求:PHP 4, PHP 5, PHP 7 语法 bool is_bool ( mixed $ ...