Vue中的components组件与props的使用解读

<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>

<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);
    },
  }

  props: {
    rowClick: {
      type: Function,
      default: function() {}
    },
    title: {
      type: String,
      default: "标题"
    },
    display: {
      type: String,
      default: "table" 
    },
    columnCount: {
      type: Number,
      default: 4
    },
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    showPage: {
      type: Boolean,
      default: true
    },
    api: {
      type: Object,
      default() {
        return {};
      }
    },
    parameter: {
      type: Object,
      default() {
        return {};
      }
    },
    defaultParameter: {
      type: Boolean,
      default() {
        return true;
      }
    }
  },

 menu:{
     type:Array,
     default:function(){
         return []
     }
 }

 menu:{
     type:Array,
     default:[]
 }