怎么在vue 中利用自定义组件实现通讯录功能

这篇文章给大家介绍怎么在vue 中利用自定义组件实现通讯录功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

<template>  <div>   <my-header custom-title="通讯录" custom-fixed >    <button @touchstart="backBtn" slot="left">首页</button>    <button @touchstart="homeBtn" slot="right">+</button>   </my-header>   <my-list :user-data="userData"></my-list> <!-- 传递数据 -->   <my-alert custom-title="呼叫">    <div class="alert_btn">      <button class="aler_tbn" @touchstart="confirmBtn">确认</button>      <button class="aler_tbn" @touchstart="cancelBtn">取消</button>     </div>   </my-alert>  </div> </template> <script> import Vue from 'vue';  import Vuex from 'vuex';  var userData=[   {"index":"A","users":[    {"name":"a1","tel":"13333333331"},    {"name":"a2","tel":"13333333332"},    {"name":"a3","tel":"13333333333"},   ]},   {"index":"B","users":[    {"name":"b1","tel":"13333333331"},    {"name":"b2","tel":"13333333332"},    {"name":"b3","tel":"13333333333"},   ]},   {"index":"C","users":[    {"name":"c1","tel":"13333333331"},    {"name":"c2","tel":"13333333332"},    {"name":"c3","tel":"13333333333"},   ]},   {"index":"D","users":[    {"name":"d1","tel":"13333333331"},    {"name":"d2","tel":"13333333332"},    {"name":"d3","tel":"13333333333"},   ]},   {"index":"E","users":[    {"name":"e1","tel":"13333333331"},    {"name":"e2","tel":"13333333332"},    {"name":"e3","tel":"13333333333"},   ]},   {"index":"F","users":[    {"name":"f1","tel":"13333333331"},    {"name":"f2","tel":"13333333332"},    {"name":"f3","tel":"13333333333"},   ]},   {"index":"F1","users":[    {"name":"f1","tel":"13333333331"},    {"name":"f2","tel":"13333333332"},    {"name":"f3","tel":"13333333333"},   ]},   {"index":"F2","users":[    {"name":"f1","tel":"13333333331"},    {"name":"f2","tel":"13333333332"},    {"name":"f3","tel":"13333333333"},   ]},   {"index":"F3","users":[    {"name":"f1","tel":"13333333331"},    {"name":"f2","tel":"13333333332"},    {"name":"f3","tel":"13333333333"},   ]},   {"index":"F4","users":[    {"name":"f1","tel":"13333333331"},    {"name":"f2","tel":"13333333332"},    {"name":"f3","tel":"13333333333"},   ]},   {"index":"F5","users":[    {"name":"f1","tel":"13333333331"},    {"name":"f2","tel":"13333333332"},    {"name":"f3","tel":"13333333333"},   ]}, ]; var busVm=new Vue(); //空实例 非父子传递值 Vue.component('my-header',{  template:`<div id="header" :>    <slot name="left"></slot>    {{customTitle}}    <slot name="right"></slot>  </div>`,  props:{   'customTitle':{    type:String,    default:"标题"   },   'customFixed':{    type:Boolean,    default:false   }  } }) Vue.component('my-alert',{  template:`<div id="alert" ref="alert">     <div class="alert_content">      <div class="alert_title">       {{customTitle}}      </div>      <div class="alert_body">{{customBody}}</div>      <slot></slot>     </div>   </div>`,  props:{   'customTitle':{    type:String,    default:"弹窗"   },  },  data:function(){    return{     'customBody':''    }  },  mounted:function(){   busVm.$on('changeEvents',function(ev){    console.log(ev);    this.customBody=ev;    this.$refs.alert.style.display="flex"   }.bind(this));  } }) Vue.component('my-list',{  template:`<div id="list">       <ul class="list_user" ref="listuser" @touchmove="bMove=true">        <li v-for="item in userData">         <p>{{item.index}}</p>         <ul>          <li @touchend="showtel(user.tel)" v-for="user in item.users">{{user.name}}</li>         </ul>        </li>       </ul>       <ul class="list_index" ref="listIndex">        <li @touchstart="setScroll" v-for="item in userIndex">{{item}}</li>       </ul>      </div>`,  props:{   'user-data':{    type:Array,    default:function(){     return [];    }   }  },  data:function(){   return {    bMove:false   }  },  computed:{   userIndex:function(){    console.log(this.userData)    console.log(this.filterIndex(this.userData))    return this.filterIndex(this.userData);   }  },  methods:{   filterIndex:function(data){     var result=[];     for(var i=0; i<data.length;i++){      if(data[i].index){       result.push(data[i].index);      }     }     return result;   },   setlistIndexPos:function(){    //   1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素    // 　　2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。    // 　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点     var iH= this.$refs.listIndex.offsetHeight;     this.$refs.listIndex.style.marginTop=-iH/2 +'px';   },   showtel:function(ev){    if(!this.bMove){      busVm.$emit("changeEvents",ev)    }else{     this.bMove=false;    }   },   setScroll:function(ev){    console.log(ev.target.innerHTML);    var ap=this.$refs.listuser.getElementsByTagName('p');    for(var i=0;i<ap.length;i++){     if(ap[i].innerHTML==ev.target.innerHTML){      document.body.scrollTop=ap[i].offsetTop;      document.documentElement.scrollTop=ap[i].offsetTop;      window.scrollTop=ap[i].offsetTop;       console.log(ap[i].offsetTop);     }    }   }  },  mounted:function(){   this.setlistIndexPos();  } }) export default {  name: "HelloWorld",  data() {   return {    userData:userData //挂载数据    }   },   methods:{    backBtn:function(){     alert("123")    },    homeBtn:function(){     alert("123")    },    confirmBtn:function(){     alert("a");    },    cancelBtn:function(){      console.log(this);      this.$children[2].$el.style.display="none"; //此处需要从外级找到    }   }, }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style> .page-container {  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%; } #alert{width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: fixed; top: 0; top: 0; z-index: 20px; display: none;} #alert .alert_content{width: 200px;position: relative; height: 150px; background: #fff;border-radius: 10px; margin: auto;} .alert_body{height: 50px; line-height: 50px; text-align: center;} .alert_btn{position: absolute;right: 0 ;bottom:0;} .list_index{  position: fixed;list-style: none; padding-right: 10px; font-size: 20px; font-weight: 700;   top: 50%;   right: 0;}   .alert_title{padding-top: 20px;} #list .list_user p{background: #ccc; padding-left: 10px} #list .list_user ul li{ padding-left: 10px;border-bottom: 1px solid #ccc; line-height:30px;} #list{    width: 100%;   text-align: left;    float: left;  position: relative; top: 40px; overflow: hidden; } .aler_tbn{padding: 5px; margin-bottom: 5px; border-radius: 5px;} button{background: #f60; color: #fff;} #header{width: 100%;height:40px; background: #666; z-index:9999;color: #fff;text-align: center;line-height: 40px;font-size: 20px;} #header button{height: 100%;padding: 0 5px} #header button:nth-of-type(1){float: left} #header button:nth-of-type(2){float: right} </style>

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

关于怎么在vue 中利用自定义组件实现通讯录功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。