• vue-cli 3.0 项目，使用components组件化开发，可以减少不必要重复的代码
  初始化vue-cli3.0的项目的结构目录下的src下会有个components文件夹
  

建议：在components中创建对应模块的文件夹，存放该模块的公共组件

在loginReg.vue文件夹中写上代码，通过props父传子的方式，那需要接收父组件的值使用 绑定：属性名="变量"的形式。并且在props中定义

以下是loginReg.vue 文件:

<template>
  <div class="loginRegComponent">
    <div class="titleBox">
      <p class="title-left"></p>
      <p v-if="title" class="title-center">{{title}}</p>
      <p class="title-right" v-if="lesgo=='去注册'" @click="$router.push('/register')">{{lesgo}}</p>
      <p class="title-right" v-else @click="$router.push('/login')">{{lesgo}}</p>
    </div>
    <input type="text" v-model="userinfo.username" class="username input-group form-control glyphicon glyphicon-user" :placeholder="placeholderUser">
    <input type="password" v-model="userinfo.password" class="password input-group form-control" :placeholder="placeholderPsw">
    <div>
      <input type="text" v-model="userinfo.code" class="code input-group form-control" :placeholder="placeholderCode">
      <span class="codeNumber"></span>
    </div>
    <button class="btn btn-primary" @click="btnSubmit">{{btnText}}</button>
  </div>
</template>
<script>
export default {
  props: {
    title: String,
    placeholderUser:String,
    placeholderPsw: String,
    placeholderCode: Number,
    btnText:{
      default: "text", //可以传个默认值
      type:String 		//类型
	},
    lesgo: String,
  },
  data() {
    return {
      userinfo: {
        username: null,
        password: null,
        code: null,
      },
    };
  },
  methods: {
    btnSubmit() { //发送事件  数据
      this.$emit("btnSubmit", this.userinfo);
    },
  },
};
</script>

在login.vue 引入写好的loginReg.vue组件，通过props的参数名来对应的设置值

注册页面也是对饮的引入<login-reg> 的方式进行传参，在不需要显示对应的input框的时候可以使用v-if来判断，存在值才显示。

login.vue页面：

<template>
  <div id="login" class="login" :style="{height:DocHeight+'px'}">
    <div class="container-fluid">
      <login-reg 
	      title="登录" 
	      placeholderUser="请输入账号" 
	      placeholderPsw="请输入密码" 
	      placeholderCode="请输入验证码" 
	      btnText="登录" 
	      @btnSubmit="btnSubmit"  //接收事件
	      lesgo="去注册"
      >
      </login-reg>
    </div>
  </div>
</template>

<script>
// 通过import的方式导入
import loginReg from "@/components/loginReg/loginReg.vue";
export default {
  name: "login",
  components: {//注册组件
    loginReg,
  },
  data() {
    return {};
  },
  methods: {
    btnSubmit(data) {//接收子组件发送过来的事件/数据
      console.log(data);
    },
  }

效果图