文件一：

AccountLogin.vue

<template>

<div>

<el-form :model="ruleForm" :rules="rules">

<!-- 每一个表单，加props属性，才能用来验证 -->

<!-- 子组件中不能直接使用父组件的数据。应该使用props传递父组件到子组件的数据，子组件通过events给父组件发消息，以此实现父子组件间的通信。 -->

<!-- vue里是单向数据流，如果直接绑定props改变父组件的数据会报错。 -->

<el-form-item props="username">

<el-input v-model="ruleForm.username" placeholder="请输入用户名">

<!-- 卡槽 -->

<i slot="prefix" class="el-icon-user"></i>

</el-input>

</el-form-item>

<el-form-item props="password">

<el-input v-model="ruleForm.password" placeholder="请输入密码" show-password>

<i slot="prefix" class="el-icon-lock"></i>

</el-input>

</el-form-item>

<el-form-item>

<el-button type="primary" style="width: 100%">登录</el-button>

</el-form-item>

</el-form>

</div>

</template>

<script>

export default {

name: "AccountLogin",

components: {},

props: {

//   接收验证数据

// 接收了两个数据，一个是表单对象，一个是验证对象

ruleForm: {

type: Object,

required: true

},

rules: {

type: Object,

required: true

}

},

data() {

return {}

},

methods: {},

mounted() {},

created() {},

filters: {},

computed: {},

watch: {},

directives: {}

};

</script>

文件二：Login.vue

<template>

<div class="login">

<h1>账号密码控件</h1>

<div class="account">

<!-- 调用组件的时候需要传rule-form、rules -->

<!-- <account-login></account-login> -->

<account-login :rule-form="ruleForm" :rules="rules"></account-login>

<!-- <AccountLogin :rule-form="ruleForm" :rules="rules"></AccountLogin> -->

</div>

</div>

</template>

<script>

export default {

name: "Login",

components: {},

props: {},

data() {

return {

// 验证规则写在父组件是因为规则可能有很多 不止一种规则 扩展性较强 写在内部就写死了 课程中只是一种常规验证 实际开发中则规则比较多

ruleForm: {

username: "",

password: "",

},

rules: {

username: [

{

required: true,

message: "用户名不能为空",

//触发方式：失去焦点之后触发

trigger: "blur",

},

{

min: 2,

max: 6,

message: "用户名长度在2-6个字符之间",

trigger: "blur",

},

],

password: [

{

required: true,

message: "密码不能为空",

trigger: "blur",

},

{

min: 6,

max: 15,

message: "密码长度在6-15个字符之间",

trigger: "blur",

},

],

},

};

},

};

</script>

<style scoped lang="scss">

.login {

margin-top: 30px;

margin-left: 30px;

}

.account {

width: 500px;

}

</style>

文件三：

global.index.js

//这个文件用来注册全局组件

import Vue from "vue";

import BackTop from "../components/backTop/BackTop";

import AccountLogin from "../components/account/AccountLogin"

//注册全局组件,第一个参数为注册组件的名字，第二个参数为注册组件的实例

Vue.component('backTop',BackTop)

Vue.component('accountLogin',AccountLogin)