什么是组件：
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。
写在前面：
今天要实现的功能是在 完善个人信息页面（vue）中添加手机验证码组件，当用户点击 手机选项时，弹出获取验证码组件，完成验证手机的功能：
这里考虑到功能的复用，我把当前弹出手机验证码的操作放在了单独的组件中：
<template >
<div>
<div class="bind-phone-box">
<div class="phone-title">绑定手机</div>
<div class="phone-content" v-on:click.stop="fillContent">
<input v-model="phoneNum" class="phone-num" type="text" placeholder="请输入手机号码">
<div class="verify-box clearfix">
<input class="verify-num" v-model="verifyNum" type="text" placeholder="请输入验证码"><input v-on:click="sendSmsCode" class="verify-btn" type="button" v-model="btnContent" v-bind="{'disabled':disabled}">
</div>
</div>
<div class="phone-submit clearfix">
<input class="submit-cancel" type="button" value="取消">
<input class="submit-confirm" v-on:click.stop="verificationCode" type="button" value="确定">
</div>
</div>
</div>
</template>
并把当前组件放在需要使用它的组件中，这里需要注意的是，在控制 绑定手机组件的显示和隐藏的时候，出现了一个小问题：点击 “手机” 按钮需要显示当前组件，但什么时候去隐藏当前的组件呢，我是这样想的：
情况1：用户已经输完了手机号并通过了验证，点击"确定"按钮的时候需要隐藏当前组件；
情况2：用户没有完成手机验证，但又不想继续，点击当前手机的任意位置（除去“确定”按钮、手机号输入框和 验证码输入框）都应该隐藏当前组件；
基于这两种情况，我在父组件中给子组件添加了一个容器：
<li class="mui-table-view-cell phone-li">
<span v-on:click="verifyPhone" class="mui-navigate-right"><span>手机号<span class="necessary">*</span></span></span>
<!-- 手机验证码 -->
<div class="shade" v-show="verifyShow" v-on:click="verifyPhone">
<!-- 手机验证码子组件 -->
<phoneVerify></phoneVerify>
</div>
</li>
内容版权声明：除非注明，否则皆为本站原创文章。