From db680fc791876fd12ef0fdfbea882147c6a08ad1 Mon Sep 17 00:00:00 2001
From: yt0379 <yt0379@qq.com>
Date: Fri, 31 Jul 2020 17:22:45 +0800
Subject: [PATCH 1/3] init

---
 src/components/HelloWorld.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index c23adb3da..65002ee27 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -8,7 +8,7 @@
     <!-- 插槽 -->
     <!-- <SlotExample></SlotExample> -->
     <!-- 递归 -->
-    <TreeExample></TreeExample>
+    <!-- <TreeExample></TreeExample> -->
   </div>
 </template>
 

From 00041d300c93811c6c4bae775077390ac70fdea1 Mon Sep 17 00:00:00 2001
From: yt0379 <yt0379@qq.com>
Date: Fri, 31 Jul 2020 21:21:36 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=80=9A=E4=BF=A1?=
 =?UTF-8?q?=E3=80=81=E8=A1=A8=E5=8D=95=E5=BC=80=E5=A7=8B=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HelloWorld.vue             |  4 +--
 src/components/communication/Child2.vue   | 23 +++++++-----
 src/components/communication/Grandson.vue | 29 +++++++++++++++
 src/components/communication/index.vue    |  7 +++-
 src/components/form/KForm.vue             | 15 ++++++++
 src/components/form/KFormItem.vue         | 31 ++++++++++++++++
 src/components/form/KInput.vue            | 32 +++++++++++++++++
 src/components/form/index.vue             | 43 ++++++++++++++++++-----
 8 files changed, 165 insertions(+), 19 deletions(-)
 create mode 100644 src/components/communication/Grandson.vue
 create mode 100644 src/components/form/KForm.vue
 create mode 100644 src/components/form/KFormItem.vue
 create mode 100644 src/components/form/KInput.vue

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 65002ee27..c26d75cbd 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -2,9 +2,9 @@
   <div class="hello">
     <h1>{{ msg }}</h1>
     <!-- 组件通信 -->
-    <Communication></Communication>
+    <!-- <Communication></Communication> -->
     <!-- 表单 -->
-    <!-- <FormExample></FormExample> -->
+    <FormExample></FormExample>
     <!-- 插槽 -->
     <!-- <SlotExample></SlotExample> -->
     <!-- 递归 -->
diff --git a/src/components/communication/Child2.vue b/src/components/communication/Child2.vue
index bb7b08277..d9c35619b 100644
--- a/src/components/communication/Child2.vue
+++ b/src/components/communication/Child2.vue
@@ -1,21 +1,28 @@
 <template>
   <div>
     <h3>child2</h3>
+    <!-- $attrs -->
+    <p>{{$attrs.msg}}</p>
+    <!-- 隔代传参,v-bind会展开$attrs -->
+    <Grandson v-bind="$attrs" v-on="$listeners"></Grandson>
     <button @click="sendToChild1">给child1发送消息</button>
   </div>
 </template>
 
 <script>
-  export default {
-    methods: {
-      sendToChild1() {
-        // 利用事件总线发送事件
-        this.$bus.$emit('event-from-child2', 'some msg from child2')
-      }
-    },
+import Grandson from "@/components/communication/Grandson.vue";
+export default {
+  components: {
+    Grandson
+  },
+  methods: {
+    sendToChild1() {
+      // 利用事件总线发送事件
+      this.$bus.$emit("event-from-child2", "some msg from child2");
+    }
   }
+};
 </script>
 
 <style scoped>
-
 </style>
\ No newline at end of file
diff --git a/src/components/communication/Grandson.vue b/src/components/communication/Grandson.vue
new file mode 100644
index 000000000..e0bee805c
--- /dev/null
+++ b/src/components/communication/Grandson.vue
@@ -0,0 +1,29 @@
+<template>
+  <div @click="$emit('some-event','msg from grandson')">
+    <h3>grandson</h3>
+    <p>{{msg}}</p>
+
+    <!-- inject -->
+    <p>{{foo1}}</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    inject: {
+      foo1: {
+        from: 'foo'
+      }
+    },
+    props: {
+      msg: {
+        type: String,
+        default: ''
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/communication/index.vue b/src/components/communication/index.vue
index 394f448bb..5bafdf764 100644
--- a/src/components/communication/index.vue
+++ b/src/components/communication/index.vue
@@ -4,7 +4,7 @@
     <!-- props, 自定义事件 -->
     <Child1 msg="some msg from parent" @some-event="onSomeEvent"></Child1>
     <!-- 事件总线 -->
-    <Child2></Child2>
+    <Child2 msg="some msg from parent" @some-event="onSomeEvent"></Child2>
   </div>
 </template>
 
@@ -13,6 +13,11 @@
   import Child2 from '@/components/communication/Child2.vue'
   
   export default {
+    provide() {
+      return {
+        foo: 'foo'
+      }
+    },
     components: {
       Child1, Child2
     },
diff --git a/src/components/form/KForm.vue b/src/components/form/KForm.vue
new file mode 100644
index 000000000..4aa744fa2
--- /dev/null
+++ b/src/components/form/KForm.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/form/KFormItem.vue b/src/components/form/KFormItem.vue
new file mode 100644
index 000000000..9f9bdfd0c
--- /dev/null
+++ b/src/components/form/KFormItem.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <!-- label -->
+    <label v-if="label">{{label}}</label>
+    <slot></slot>
+    <!-- 错误信息 -->
+    <p class="error" v-if="error">{{error}}</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        error: 'some error'
+      }
+    },
+    props: {
+      label: {
+        type: String,
+        default: ''
+      },
+    },
+  }
+</script>
+
+<style scoped>
+.error {
+  color:red
+}
+</style>
\ No newline at end of file
diff --git a/src/components/form/KInput.vue b/src/components/form/KInput.vue
new file mode 100644
index 000000000..1c765262f
--- /dev/null
+++ b/src/components/form/KInput.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <!-- 自定义组件双绑：:value, @input -->
+    <input :type="type" :value="value" 
+      @input="onInput" v-bind="$attrs">
+  </div>
+</template>
+
+<script>
+  export default {
+    inheritAttrs: false,
+    props: {
+      type: {
+        type: String,
+        default: 'text'
+      },
+      value: {
+        type: String,
+        default: ''
+      }
+    },
+    methods: {
+      onInput(e) {
+        this.$emit('input', e.target.value)
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/form/index.vue b/src/components/form/index.vue
index 2e2634261..240bf714b 100644
--- a/src/components/form/index.vue
+++ b/src/components/form/index.vue
@@ -1,19 +1,46 @@
 <template>
   <div>
-    <ElementTest></ElementTest>
+    <!-- <ElementTest></ElementTest> -->
+
+    <!-- KForm: 指定管理数据和校验规则 -->
+    <!-- KFormItem: 数据校验和错误展示 -->
+    <KForm :model="model" :rules="rules">
+      <KFormItem label="用户名">
+        <KInput v-model="model.username" placeholder="请输入账户"></KInput>
+      </KFormItem>
+      <KFormItem label="密码">
+        <KInput v-model="model.password" placeholder="请输入密码" type="password"></KInput>
+      </KFormItem>
+    </KForm>
   </div>
 </template>
 
 <script>
-  import ElementTest from '@/components/form/ElementTest.vue'
-  
-  export default {
-    components: {
-      ElementTest
-    },
+import ElementTest from "@/components/form/ElementTest.vue";
+import KInput from "@/components/form/KInput.vue";
+import KFormItem from "@/components/form/KFormItem.vue";
+import KForm from "@/components/form/KForm.vue";
+
+export default {
+  components: {
+    ElementTest,
+    KInput,
+    KFormItem,KForm
+  },
+  data() {
+    return {
+      model: {
+        username: "tom",
+        password: ""
+      },
+      rules: {
+        username: [{required:true,message:'必须输入用户名'}],
+        password: [{required:true,message:'必须输入密码'}]
+      }
+    };
   }
+};
 </script>
 
 <style scoped>
-
 </style>
\ No newline at end of file

From b67590be668ed9c477b2e226ac0db813ef8a5d05 Mon Sep 17 00:00:00 2001
From: yt0379 <yt0379@qq.com>
Date: Fri, 31 Jul 2020 22:28:01 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E8=A1=A8=E5=8D=95=E6=A0=A1=E9=AA=8C?=
 =?UTF-8?q?=E3=80=81=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                 | 25 +++++++-----
 package.json                      |  1 +
 src/components/Notice.vue         | 63 +++++++++++++++++++++++++++++++
 src/components/form/KForm.vue     | 30 +++++++++++++--
 src/components/form/KFormItem.vue | 52 +++++++++++++++++++------
 src/components/form/KInput.vue    |  3 ++
 src/components/form/index.vue     | 30 +++++++++++++--
 src/utils/create.js               | 31 +++++++++++++++
 8 files changed, 207 insertions(+), 28 deletions(-)
 create mode 100644 src/components/Notice.vue
 create mode 100644 src/utils/create.js

diff --git a/package-lock.json b/package-lock.json
index 81b4587ab..8ef528065 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1943,12 +1943,9 @@
       "dev": true
     },
     "async-validator": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz?cache=0&sync_timestamp=1575620555389&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-validator%2Fdownload%2Fasync-validator-1.8.5.tgz",
-      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
-      "requires": {
-        "babel-runtime": "6.x"
-      }
+      "version": "3.3.0",
+      "resolved": "https://r.cnpmjs.org/async-validator/download/async-validator-3.3.0.tgz",
+      "integrity": "sha1-HZIZO75g1tbIskZpLHAF6e0UqO4="
     },
     "asynckit": {
       "version": "0.4.0",
@@ -2039,7 +2036,7 @@
     },
     "babel-runtime": {
       "version": "6.26.0",
-      "resolved": "http://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "resolved": "https://r.cnpmjs.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
       "requires": {
         "core-js": "^2.4.0",
@@ -2048,12 +2045,12 @@
       "dependencies": {
         "core-js": {
           "version": "2.6.11",
-          "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.11.tgz?cache=0&sync_timestamp=1576712142038&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.11.tgz",
+          "resolved": "https://r.cnpmjs.org/core-js/download/core-js-2.6.11.tgz",
           "integrity": "sha1-OIMUafmSK97Y7iHJ3EaYXgOZMIw="
         },
         "regenerator-runtime": {
           "version": "0.11.1",
-          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
+          "resolved": "https://r.cnpmjs.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
           "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
         }
       }
@@ -4016,6 +4013,16 @@
         "normalize-wheel": "^1.0.1",
         "resize-observer-polyfill": "^1.5.0",
         "throttle-debounce": "^1.0.1"
+      },
+      "dependencies": {
+        "async-validator": {
+          "version": "1.8.5",
+          "resolved": "https://r.cnpmjs.org/async-validator/download/async-validator-1.8.5.tgz",
+          "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
+          "requires": {
+            "babel-runtime": "6.x"
+          }
+        }
       }
     },
     "elliptic": {
diff --git a/package.json b/package.json
index 90f14504d..e5b595ba0 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "async-validator": "^3.3.0",
     "core-js": "^3.4.3",
     "element-ui": "^2.4.5",
     "vue": "^2.6.10"
diff --git a/src/components/Notice.vue b/src/components/Notice.vue
new file mode 100644
index 000000000..3dd9b800a
--- /dev/null
+++ b/src/components/Notice.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="box" v-if="isShow">
+    <h3>{{title}}</h3>
+    <p class="box-content">{{message}}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    message: {
+      type: String,
+      default: ""
+    },
+    duration: {
+      type: Number,
+      default: 1000
+    }
+  },
+  data() {
+    return {
+      isShow: false
+    };
+  },
+  methods: {
+    show() {
+      this.isShow = true;
+      setTimeout(this.hide, this.duration);
+    },
+    hide() {
+      this.isShow = false;
+      this.remove();
+    }
+  }
+};
+</script>
+
+<style>
+.box {
+  position: fixed;
+  width: 100%;
+  top: 16px;
+  left: 0;
+  text-align: center;
+  pointer-events: none;
+  background-color: #fff;
+  border: grey 3px solid;
+  box-sizing: border-box;
+}
+.box-content {
+  width: 200px;
+  margin: 10px auto;
+  font-size: 14px;  
+  padding: 8px 16px;
+  background: #fff;
+  border-radius: 3px;
+  margin-bottom: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/form/KForm.vue b/src/components/form/KForm.vue
index 4aa744fa2..51da265e2 100644
--- a/src/components/form/KForm.vue
+++ b/src/components/form/KForm.vue
@@ -5,11 +5,35 @@
 </template>
 
 <script>
-  export default {
-    
+export default {
+  provide() {
+    return {
+      form: this
+    };
+  },
+  props: {
+    model: {
+      type: Object,
+      required: true
+    },
+    rules: Object
+  },
+  methods: {
+    validate(cb) {
+      // 检查所有表单项目
+      // 他们都要校验通过
+      // 获得一个Promise数组
+      const tasks = this.$children
+        .filter(item => item.prop) // 必须拥有prop属性的FormItem留下
+        .map(item => item.validate());
+
+      Promise.all(tasks)
+        .then(() => cb(true))
+        .catch(() => cb(false));
+    }
   }
+};
 </script>
 
 <style lang="scss" scoped>
-
 </style>
\ No newline at end of file
diff --git a/src/components/form/KFormItem.vue b/src/components/form/KFormItem.vue
index 9f9bdfd0c..f019a332a 100644
--- a/src/components/form/KFormItem.vue
+++ b/src/components/form/KFormItem.vue
@@ -9,23 +9,51 @@
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        error: 'some error'
-      }
-    },
-    props: {
-      label: {
-        type: String,
-        default: ''
-      },
+import Validator from "async-validator";
+
+export default {
+  inject: ["form"],
+  data() {
+    return {
+      error: ""
+    };
+  },
+  props: {
+    label: {
+      type: String,
+      default: ""
     },
+    prop: String
+  },
+  mounted() {
+    this.$on("validate", () => {
+      this.validate();
+    });
+  },
+  methods: {
+    validate() {
+      // 校验规则
+      const rules = this.form.rules[this.prop];
+      // 当前值
+      const value = this.form.model[this.prop];
+
+      // 创建一个校验器实例
+      const validator = new Validator({ [this.prop]: rules });
+      // 校验, 返回Promise
+      return validator.validate({ [this.prop]: value}, errors => {
+        if (errors) {
+          this.error = errors[0].message
+        } else {
+          this.error = ''
+        }
+      })
+    }
   }
+};
 </script>
 
 <style scoped>
 .error {
-  color:red
+  color: red;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/form/KInput.vue b/src/components/form/KInput.vue
index 1c765262f..0726dfee6 100644
--- a/src/components/form/KInput.vue
+++ b/src/components/form/KInput.vue
@@ -22,6 +22,9 @@
     methods: {
       onInput(e) {
         this.$emit('input', e.target.value)
+
+        // 触发校验
+        this.$parent.$emit('validate')
       }
     },
   }
diff --git a/src/components/form/index.vue b/src/components/form/index.vue
index 240bf714b..af642b152 100644
--- a/src/components/form/index.vue
+++ b/src/components/form/index.vue
@@ -4,13 +4,14 @@
 
     <!-- KForm: 指定管理数据和校验规则 -->
     <!-- KFormItem: 数据校验和错误展示 -->
-    <KForm :model="model" :rules="rules">
-      <KFormItem label="用户名">
+    <KForm :model="model" :rules="rules" ref="loginForm">
+      <KFormItem label="用户名" prop="username">
         <KInput v-model="model.username" placeholder="请输入账户"></KInput>
       </KFormItem>
-      <KFormItem label="密码">
+      <KFormItem label="密码" prop="password">
         <KInput v-model="model.password" placeholder="请输入密码" type="password"></KInput>
       </KFormItem>
+      <KFormItem><button @click="login">登录</button></KFormItem>
     </KForm>
   </div>
 </template>
@@ -21,6 +22,10 @@ import KInput from "@/components/form/KInput.vue";
 import KFormItem from "@/components/form/KFormItem.vue";
 import KForm from "@/components/form/KForm.vue";
 
+import Notice from "@/components/Notice.vue"
+import create from "@/utils/create"
+
+
 export default {
   components: {
     ElementTest,
@@ -38,7 +43,24 @@ export default {
         password: [{required:true,message:'必须输入密码'}]
       }
     };
-  }
+  },
+  methods: {
+    login() {
+
+      this.$refs.loginForm.validate(isValid => {
+        create(Notice, {
+          title: '老杨喊你来搬砖',
+          message: isValid ? '请求登录' : '校验失败'
+        }).show()
+        // if (isValid) {
+        //   console.log('提交登录');
+          
+        // } else {
+        //   alert('登录失败')
+        // }
+      })
+    }
+  },
 };
 </script>
 
diff --git a/src/utils/create.js b/src/utils/create.js
new file mode 100644
index 000000000..81c9fb21e
--- /dev/null
+++ b/src/utils/create.js
@@ -0,0 +1,31 @@
+import Vue from 'vue'
+
+// Component - 组件配置对象
+// props - 传递给它的属性
+function create(Component, props) {
+  // const Ctor = Vue.extend(Component)
+  // new Ctor()
+  
+  // 1.构建Component的实例
+  const vm = new Vue({
+    render(h) {
+      // h是createElement
+      // 它可以返回一个vnode
+      return h(Component, { props })
+    }
+  }).$mount() // 不设置挂载目标，依然可以转换vnode为真实节点$el
+  // 2.挂载到body上
+  document.body.appendChild(vm.$el)
+
+
+  // 3.获取组件实例
+  const comp = vm.$children[0]
+
+  comp.remove = () => {
+    document.body.removeChild(vm.$el)
+    vm.$destroy()
+  }
+  
+  return comp
+}
+export default create
\ No newline at end of file