同步web28

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"

src/components/HelloWorld.vue

@@ -2,13 +2,13 @@
   <div class="hello">
     <h1>{{ msg }}</h1>
     <!-- 组件通信 -->
-    <Communication></Communication>
+    <!-- <Communication></Communication> -->
     <!-- 表单 -->
-    <!-- <FormExample></FormExample> -->
+    <FormExample></FormExample>
     <!-- 插槽 -->
     <!-- <SlotExample></SlotExample> -->
     <!-- 递归 -->
-    <TreeExample></TreeExample>
+    <!-- <TreeExample></TreeExample> -->
   </div>
 </template>
 

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>

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>

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>

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

src/components/form/KForm.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+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>

src/components/form/KFormItem.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <!-- label -->
+    <label v-if="label">{{label}}</label>
+    <slot></slot>
+    <!-- 错误信息 -->
+    <p class="error" v-if="error">{{error}}</p>
+  </div>
+</template>
+
+<script>
+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;
+}
+</style>

src/components/form/KInput.vue

@@ -0,0 +1,35 @@
+<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)
+
+        // 触发校验
+        this.$parent.$emit('validate')
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>