Form: remove emitter (#4532)

packages/checkbox/src/checkbox-group.vue

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

packages/checkbox/src/checkbox.vue

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

packages/form/src/form-item.vue

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

packages/form/src/form.vue

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