Revert "Form: remove emitter (#4532)"

This reverts commit fff7dddd94053e6411d07af88fe6eca03ec88c0a.

packages/checkbox/src/checkbox-group.vue

@@ -1,16 +1,12 @@
 <script>
+  import Emitter from 'element-ui/src/mixins/emitter';
+
   export default {
     name: 'ElCheckboxGroup',
 
     componentName: 'ElCheckboxGroup',
 
-    provide() {
-      return {
-        ElCheckboxGroup: this
-      };
-    },
-
-    inject: ['ElFormItem'],
+    mixins: [Emitter],
 
     props: {
       value: {},
@@ -23,7 +19,7 @@
 
     watch: {
       value(value) {
-        this.ElFormItem.$emit('el.form.change', value);
+        this.dispatch('ElFormItem', 'el.form.change', [value]);
       }
     }
   };

packages/checkbox/src/checkbox.vue

@@ -40,9 +40,13 @@
   </label>
 </template>
 <script>
+  import Emitter from 'element-ui/src/mixins/emitter';
+
   export default {
     name: 'ElCheckbox',
 
+    mixins: [Emitter],
+
     componentName: 'ElCheckbox',
 
     data() {
@@ -52,8 +56,6 @@
       };
     },
 
-    inject: ['ElCheckboxGroup'],
-
     computed: {
       model: {
         get() {
@@ -65,16 +67,17 @@
         set(val) {
           if (this.isGroup) {
             let isLimitExceeded = false;
-            (this.group.min !== undefined &&
-              val.length < this.group.min &&
+            (this._checkboxGroup.min !== undefined &&
+              val.length < this._checkboxGroup.min &&
               (isLimitExceeded = true));
 
-            (this.group.max !== undefined &&
-              val.length > this.group.max &&
+            (this._checkboxGroup.max !== undefined &&
+              val.length > this._checkboxGroup.max &&
               (isLimitExceeded = true));
 
             isLimitExceeded === false &&
-            this.group.$emit('input', val);
+            this.dispatch('ElCheckboxGroup', 'input', [val]);
+
           } else if (this.value !== undefined) {
             this.$emit('input', val);
           } else {
@@ -93,16 +96,21 @@
         }
       },
 
-      group() {
-        return this.ElCheckboxGroup;
-      },
-
       isGroup() {
-        return !!this.group;
+        let parent = this.$parent;
+        while (parent) {
+          if (parent.$options.componentName !== 'ElCheckboxGroup') {
+            parent = parent.$parent;
+          } else {
+            this._checkboxGroup = parent;
+            return true;
+          }
+        }
+        return false;
       },
 
       store() {
-        return this.group ? this.group.value : this.value;
+        return this._checkboxGroup ? this._checkboxGroup.value : this.value;
       }
     },
 
@@ -132,7 +140,7 @@
         this.$emit('change', ev);
         if (this.isGroup) {
           this.$nextTick(_ => {
-            this.group.$emit('change', this.group.value);
+            this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
           });
         }
       }

packages/form/src/form-item.vue

@@ -17,6 +17,7 @@
 </template>
 <script>
   import AsyncValidator from 'async-validator';
+  import emitter from 'element-ui/src/mixins/emitter';
 
   function noop() {}
 
@@ -48,13 +49,7 @@
 
     componentName: 'ElFormItem',
 
-    provide() {
-      return {
-        ElFormItem: this
-      };
-    },
-
-    inject: ['ElForm'],
+    mixins: [emitter],
 
     props: {
       label: String,
@@ -98,7 +93,11 @@
         return ret;
       },
       form() {
-        return this.ElForm;
+        var parent = this.$parent;
+        while (parent.$options.componentName !== 'ElForm') {
+          parent = parent.$parent;
+        }
+        return parent;
       },
       fieldValue: {
         cache: false,
@@ -199,7 +198,8 @@
     },
     mounted() {
       if (this.prop) {
-        this.ElForm.$emit('el.form.addField', this);
+        this.dispatch('ElForm', 'el.form.addField', [this]);
+
         let initialValue = this.fieldValue;
         if (Array.isArray(initialValue)) {
           initialValue = [].concat(initialValue);
@@ -223,7 +223,7 @@
       }
     },
     beforeDestroy() {
-      this.ElForm.$emit('el.form.removeField', this);
+      this.dispatch('ElForm', 'el.form.removeField', [this]);
     }
   };
 </script>

packages/form/src/form.vue

@@ -12,12 +12,6 @@
 
     componentName: 'ElForm',
 
-    provide() {
-      return {
-        ElForm: this
-      };
-    },
-
     props: {
       model: Object,
       rules: Object,