perf: update listeners

build/config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  devComponent: 'table',
+  devComponent: 'menu',
 };

components/date-picker/RangePicker.jsx

@@ -15,6 +15,7 @@ import {
   mergeProps,
   getComponentFromProp,
   isValidElement,
+  getListeners,
 } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import { cloneElement } from '../_util/vnode';
@@ -262,16 +263,16 @@ export default {
       sShowDate: showDate,
       sHoverValue: hoverValue,
       sOpen: open,
-      $listeners,
       $scopedSlots,
     } = this;
+    const listeners = getListeners(this);
     const {
       calendarChange = noop,
       ok = noop,
       focus = noop,
       blur = noop,
       panelChange = noop,
-    } = $listeners;
+    } = listeners;
     const {
       prefixCls: customizePrefixCls,
       tagPrefixCls: customizeTagPrefixCls,
@@ -407,7 +408,7 @@ export default {
     const vcDatePickerProps = mergeProps(
       {
         props,
-        on: $listeners,
+        on: listeners,
       },
       pickerChangeHandler,
       {

components/date-picker/WeekPicker.jsx

@@ -9,6 +9,7 @@ import {
   initDefaultProps,
   getComponentFromProp,
   isValidElement,
+  getListeners,
 } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import { WeekPickerProps } from './interface';
@@ -149,16 +150,15 @@ export default {
       localeCode,
       disabledDate,
       $data,
-      $listeners,
       $scopedSlots,
     } = this;
-
+    const listeners = getListeners(this);
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('calendar', customizePrefixCls);
     this._prefixCls = prefixCls;
 
     const { _value: pickerValue, _open: open } = $data;
-    const { focus = noop, blur = noop } = $listeners;
+    const { focus = noop, blur = noop } = listeners;
 
     if (pickerValue && localeCode) {
       pickerValue.locale(localeCode);
@@ -225,7 +225,7 @@ export default {
         open,
       },
       on: {
-        ...$listeners,
+        ...listeners,
         change: this.handleChange,
         openChange: this.handleOpenChange,
       },

components/date-picker/wrapPicker.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { generateShowHourMinuteSecond } from '../time-picker';
 import enUS from './locale/en_US';
-import { getOptionProps, initDefaultProps } from '../_util/props-util';
+import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 
 const DEFAULT_FORMAT = {
@@ -168,7 +168,7 @@ export default function wrapPicker(Picker, props, pickerType) {
             timePicker,
           },
           on: {
-            ...this.$listeners,
+            ...getListeners(this),
             openChange: this.handleOpenChange,
             focus: this.handleFocus,
             blur: this.handleBlur,

components/drawer/index.jsx

@@ -3,7 +3,7 @@ import VcDrawer from '../vc-drawer/src';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import Icon from '../icon';
-import { getComponentFromProp, getOptionProps } from '../_util/props-util';
+import { getComponentFromProp, getOptionProps, getListeners } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import Base from '../base';
 
@@ -214,7 +214,7 @@ const Drawer = {
       },
       on: {
         maskClick: this.onMaskClick,
-        ...this.$listeners,
+        ...getListeners(this),
       },
     };
     return <VcDrawer {...vcDrawerProps}>{this.renderBody(prefixCls)}</VcDrawer>;

components/dropdown/dropdown.jsx

@@ -2,7 +2,12 @@ import RcDropdown from '../vc-dropdown/src/index';
 import DropdownButton from './dropdown-button';
 import PropTypes from '../_util/vue-types';
 import { cloneElement } from '../_util/vnode';
-import { getOptionProps, getPropsData, getComponentFromProp } from '../_util/props-util';
+import {
+  getOptionProps,
+  getPropsData,
+  getComponentFromProp,
+  getListeners,
+} from '../_util/props-util';
 import getDropdownProps from './getDropdownProps';
 import { ConfigConsumerProps } from '../config-provider';
 import Icon from '../icon';
@@ -72,7 +77,7 @@ const Dropdown = {
   },
 
   render() {
-    const { $slots, $listeners } = this;
+    const { $slots } = this;
     const props = getOptionProps(this);
     const { prefixCls: customizePrefixCls, trigger, disabled, getPopupContainer } = props;
     const { getPopupContainer: getContextPopupContainer } = this.configProvider;
@@ -99,7 +104,7 @@ const Dropdown = {
         transitionName: this.getTransitionName(),
         trigger: triggerActions,
       },
-      on: $listeners,
+      on: getListeners(this),
     };
     return (
       <RcDropdown {...dropdownProps}>

components/empty/index.jsx

@@ -1,6 +1,6 @@
 import PropTypes from '../_util/vue-types';
 import { ConfigConsumerProps } from '../config-provider';
-import { getComponentFromProp } from '../_util/props-util';
+import { getComponentFromProp, getListeners } from '../_util/props-util';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import emptyImg from './empty.svg';
 import Base from '../base';
@@ -43,7 +43,7 @@ const Empty = {
         imageNode = image;
       }
       return (
-        <div class={prefixCls} {...{ on: this.$listeners }}>
+        <div class={prefixCls} {...{ on: getListeners(this) }}>
           <div class={`${prefixCls}-image`}>{imageNode}</div>
           <p class={`${prefixCls}-description`}>{des}</p>
           {this.$slots.default && <div class={`${prefixCls}-footer`}>{this.$slots.default}</div>}

components/form/Form.jsx

@@ -8,7 +8,7 @@ import createDOMForm from '../vc-form/src/createDOMForm';
 import createFormField from '../vc-form/src/createFormField';
 import FormItem from './FormItem';
 import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants';
-import { initDefaultProps } from '../_util/props-util';
+import { initDefaultProps, getListeners } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import Base from '../base';
 
@@ -192,8 +192,7 @@ const Form = {
   },
   methods: {
     onSubmit(e) {
-      const { $listeners } = this;
+      if (!getListeners(this).submit) {
-      if (!$listeners.submit) {
         e.preventDefault();
       } else {
         this.$emit('submit', e);

components/grid/Col.jsx

@@ -1,5 +1,6 @@
 import PropTypes from '../_util/vue-types';
 import { ConfigConsumerProps } from '../config-provider';
+import { getListeners } from '../_util/props-util';
 
 const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
 
@@ -46,7 +47,6 @@ export default {
       pull,
       prefixCls: customizePrefixCls,
       $slots,
-      $listeners,
       rowContext,
     } = this;
     const getPrefixCls = this.configProvider.getPrefixCls;
@@ -80,7 +80,7 @@ export default {
       ...sizeClassObj,
     };
     const divProps = {
-      on: $listeners,
+      on: getListeners(this),
       class: classes,
       style: {},
     };

components/input-number/index.jsx

@@ -1,5 +1,5 @@
 import PropTypes from '../_util/vue-types';
-import { initDefaultProps, getOptionProps } from '../_util/props-util';
+import { initDefaultProps, getOptionProps, getListeners } from '../_util/props-util';
 import classNames from 'classnames';
 import Icon from '../icon';
 import VcInputNumber from '../vc-input-number/src';
@@ -68,7 +68,7 @@ const InputNumber = {
       },
       class: inputNumberClass,
       ref: 'inputNumberRef',
-      on: this.$listeners,
+      on: getListeners(this),
     };
     return <VcInputNumber {...vcInputNumberprops} />;
   },

components/input/Group.jsx

@@ -1,5 +1,5 @@
 import PropTypes from '../_util/vue-types';
-import { filterEmpty } from '../_util/props-util';
+import { filterEmpty, getListeners } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 
 export default {
@@ -32,9 +32,8 @@ export default {
   },
   methods: {},
   render() {
-    const { $listeners } = this;
     return (
-      <span class={this.classes} {...{ on: $listeners }}>
+      <span class={this.classes} {...{ on: getListeners(this) }}>
         {filterEmpty(this.$slots.default)}
       </span>
     );

components/input/Input.jsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import TextArea from './TextArea';
 import omit from 'omit.js';
 import inputProps from './inputProps';
-import { hasProp, getComponentFromProp } from '../_util/props-util';
+import { hasProp, getComponentFromProp, getListeners } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import Icon from '../icon';
 
@@ -234,7 +234,7 @@ export default {
         'defaultValue',
         'lazy',
       ]);
-      const { stateValue, getInputClassName, handleKeyDown, handleChange, $listeners } = this;
+      const { stateValue, getInputClassName, handleKeyDown, handleChange } = this;
       const inputProps = {
         directives: [{ name: 'ant-input' }],
         domProps: {
@@ -242,7 +242,7 @@ export default {
         },
         attrs: { ...otherProps, ...this.$attrs },
         on: {
-          ...$listeners,
+          ...getListeners(this),
           keydown: handleKeyDown,
           input: handleChange,
           change: noop,
@@ -256,12 +256,11 @@ export default {
   },
   render() {
     if (this.$props.type === 'textarea') {
-      const { $listeners } = this;
       const textareaProps = {
         props: this.$props,
         attrs: this.$attrs,
         on: {
-          ...$listeners,
+          ...getListeners(this),
           input: this.handleChange,
           keydown: this.handleKeyDown,
           change: noop,

components/input/Password.jsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { getComponentFromProp, getOptionProps } from '../_util/props-util';
+import { getComponentFromProp, getOptionProps, getListeners } from '../_util/props-util';
 import Input from './Input';
 import Icon from '../icon';
 import inputProps from './inputProps';
@@ -93,7 +93,7 @@ export default {
       },
       class: inputClassName,
       ref: 'input',
-      on: this.$listeners,
+      on: getListeners(this),
     };
     return <Input {...inputProps} />;
   },

components/input/Search.jsx

@@ -4,7 +4,7 @@ import Icon from '../icon';
 import inputProps from './inputProps';
 import Button from '../button';
 import { cloneElement } from '../_util/vnode';
-import { getOptionProps, getComponentFromProp, isValidElement } from '../_util/props-util';
+import { getOptionProps, getComponentFromProp, getListeners } from '../_util/props-util';
 import PropTypes from '../_util/vue-types';
 import { ConfigConsumerProps } from '../config-provider';
 
@@ -119,7 +119,7 @@ export default {
       inputClassName = prefixCls;
     }
 
-    const on = { ...this.$listeners };
+    const on = { ...getListeners(this) };
     delete on.search;
     const inputProps = {
       props: {

components/input/TextArea.jsx

@@ -3,7 +3,7 @@ import omit from 'omit.js';
 import ResizeObserver from 'resize-observer-polyfill';
 import inputProps from './inputProps';
 import calculateNodeHeight from './calculateNodeHeight';
-import hasProp from '../_util/props-util';
+import hasProp, { getListeners } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 
 function onNextFrame(cb) {
@@ -146,7 +146,6 @@ export default {
       handleTextareaChange,
       textareaStyles,
       $attrs,
-      $listeners,
       prefixCls: customizePrefixCls,
       disabled,
     } = this;
@@ -169,7 +168,7 @@ export default {
       directives: [{ name: 'ant-input' }],
       attrs: { ...otherProps, ...$attrs },
       on: {
-        ...$listeners,
+        ...getListeners(this),
         keydown: handleKeyDown,
         input: handleTextareaChange,
         change: noop,

components/layout/layout.jsx

@@ -1,6 +1,6 @@
 import PropTypes from '../_util/vue-types';
 import classNames from 'classnames';
-import { getOptionProps } from '../_util/props-util';
+import { getOptionProps, getListeners } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 
 export const BasicProps = {
@@ -27,7 +27,7 @@ function generator(props, name) {
             prefixCls,
             ...getOptionProps(this),
           },
-          on: this.$listeners,
+          on: getListeners(this),
         };
         return <BasicComponent {...basicComponentProps}>{this.$slots.default}</BasicComponent>;
       },
@@ -38,10 +38,10 @@ function generator(props, name) {
 const Basic = {
   props: BasicProps,
   render() {
-    const { prefixCls, $slots, $listeners } = this;
+    const { prefixCls, $slots } = this;
     const divProps = {
       class: prefixCls,
-      on: $listeners,
+      on: getListeners(this),
     };
     return <div {...divProps}>{$slots.default}</div>;
   },
@@ -67,13 +67,13 @@ const BasicLayout = {
     };
   },
   render() {
-    const { prefixCls, $slots, hasSider, $listeners } = this;
+    const { prefixCls, $slots, hasSider } = this;
     const divCls = classNames(prefixCls, {
       [`${prefixCls}-has-sider`]: hasSider || this.siders.length > 0,
     });
     const divProps = {
       class: divCls,
-      on: $listeners,
+      on: getListeners,
     };
     return <div {...divProps}>{$slots.default}</div>;
   },

components/list/Item.jsx

@@ -1,6 +1,11 @@
 import PropTypes from '../_util/vue-types';
 import classNames from 'classnames';
-import { getSlotOptions, getComponentFromProp, isEmptyElement } from '../_util/props-util';
+import {
+  getSlotOptions,
+  getComponentFromProp,
+  isEmptyElement,
+  getListeners,
+} from '../_util/props-util';
 import { Col } from '../grid';
 import { ConfigConsumerProps } from '../config-provider';
 import { ListGridType } from './index';
@@ -65,7 +70,8 @@ export default {
   },
   render() {
     const { grid } = this.listContext;
-    const { prefixCls: customizePrefixCls, $slots, $listeners } = this;
+    const { prefixCls: customizePrefixCls, $slots } = this;
+    const listeners = getListeners(this);
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('list', customizePrefixCls);
 
@@ -127,7 +133,7 @@ export default {
         xl={getGrid(grid, 'xl')}
         xxl={getGrid(grid, 'xxl')}
       >
-        <div {...{ on: $listeners }} class={classString}>
+        <div {...{ on: listeners }} class={classString}>
           {extra && extraContent}
           {!extra && metaContent}
           {!extra && content}
@@ -135,7 +141,7 @@ export default {
         </div>
       </Col>
     ) : (
-      <div {...{ on: $listeners }} class={classString}>
+      <div {...{ on: listeners }} class={classString}>
         {extra && extraContent}
         {!extra && metaContent}
         {!extra && content}

components/list/index.jsx

@@ -8,7 +8,12 @@ import Pagination, { PaginationConfig } from '../pagination';
 import { Row } from '../grid';
 
 import Item from './Item';
-import { initDefaultProps, getComponentFromProp, filterEmpty } from '../_util/props-util';
+import {
+  initDefaultProps,
+  getComponentFromProp,
+  filterEmpty,
+  getListeners,
+} from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import Base from '../base';
 
@@ -136,7 +141,6 @@ const List = {
       dataSource,
       size,
       loading,
-      $listeners,
       $slots,
       paginationCurrent,
     } = this;
@@ -229,7 +233,7 @@ const List = {
     const paginationPosition = paginationProps.position || 'bottom';
 
     return (
-      <div class={classString} {...{ on: $listeners }}>
+      <div class={classString} {...{ on: getListeners(this) }}>
         {(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent}
         {header && <div class={`${prefixCls}-header`}>{header}</div>}
         <Spin {...{ props: loadingProp }}>

components/menu/MenuItem.jsx

@@ -1,5 +1,5 @@
 import { Item, itemProps } from '../vc-menu';
-import { getOptionProps } from '../_util/props-util';
+import { getOptionProps, getListeners } from '../_util/props-util';
 import Tooltip from '../tooltip';
 function noop() {}
 export default {
@@ -18,7 +18,7 @@ export default {
   render() {
     const props = getOptionProps(this);
     const { level, title, rootPrefixCls } = props;
-    const { getInlineCollapsed, $slots, $attrs: attrs, $listeners } = this;
+    const { getInlineCollapsed, $slots, $attrs: attrs } = this;
     const inlineCollapsed = getInlineCollapsed();
     let titleNode;
     if (inlineCollapsed) {
@@ -31,7 +31,7 @@ export default {
         title: inlineCollapsed ? null : title,
       },
       attrs,
-      on: $listeners,
+      on: getListeners(this),
     };
     const toolTipProps = {
       props: {

components/menu/index.jsx

@@ -4,7 +4,7 @@ import PropTypes from '../_util/vue-types';
 import animation from '../_util/openAnimation';
 import warning from '../_util/warning';
 import Item from './MenuItem';
-import { hasProp } from '../_util/props-util';
+import { hasProp, getListeners } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import commonPropsType from '../vc-menu/commonPropsType';
 import { ConfigConsumerProps } from '../config-provider';
@@ -205,7 +205,7 @@ const Menu = {
     },
   },
   render() {
-    const { layoutSiderContext, $slots, $listeners } = this;
+    const { layoutSiderContext, $slots } = this;
     const { collapsedWidth } = layoutSiderContext;
     const { getPopupContainer: getContextPopupContainer } = this.configProvider;
     const { prefixCls: customizePrefixCls, theme, getPopupContainer } = this.$props;
@@ -228,7 +228,7 @@ const Menu = {
         prefixCls,
       },
       on: {
-        ...$listeners,
+        ...getListeners(this),
         select: this.handleSelect,
         deselect: this.handleDeselect,
         openChange: this.handleOpenChange,

components/modal/Modal.jsx

@@ -14,6 +14,7 @@ import {
   getClass,
   getStyle,
   mergeProps,
+  getListeners,
 } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 
@@ -160,7 +161,6 @@ export default {
       visible,
       wrapClassName,
       centered,
-      $listeners,
       $slots,
       $attrs,
     } = this;
@@ -194,7 +194,7 @@ export default {
         closeIcon,
       },
       on: {
-        ...$listeners,
+        ...getListeners(this),
         close: this.handleCancel,
       },
       class: getClass(this),

components/pagination/MiniSelect.jsx

@@ -1,5 +1,5 @@
 import VcSelect, { SelectProps } from '../select';
-import { getOptionProps, filterEmpty } from '../_util/props-util';
+import { getOptionProps, filterEmpty, getListeners } from '../_util/props-util';
 
 export default {
   props: {
@@ -13,7 +13,7 @@ export default {
         ...selectOptionsProps,
         size: 'small',
       },
-      on: this.$listeners,
+      on: getListeners(this),
     };
     return <VcSelect {...selelctProps}>{filterEmpty(this.$slots.default)}</VcSelect>;
   },

components/pagination/Pagination.jsx

@@ -2,7 +2,7 @@ import PropTypes from '../_util/vue-types';
 import VcSelect from '../select';
 import MiniSelect from './MiniSelect';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import { getOptionProps } from '../_util/props-util';
+import { getOptionProps, getListeners } from '../_util/props-util';
 import VcPagination from '../vc-pagination';
 import enUS from '../vc-pagination/locale/en_US';
 import Icon from '../icon';
@@ -111,7 +111,7 @@ export default {
         class: {
           mini: isSmall,
         },
-        on: this.$listeners,
+        on: getListeners(this),
       };
 
       return <VcPagination {...paginationProps} />;

components/popover/index.jsx

@@ -1,7 +1,7 @@
 import Tooltip from '../tooltip';
 import abstractTooltipProps from '../tooltip/abstractTooltipProps';
 import PropTypes from '../_util/vue-types';
-import { getOptionProps, getComponentFromProp } from '../_util/props-util';
+import { getOptionProps, getComponentFromProp, getListeners } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import Base from '../base';
 
@@ -42,7 +42,7 @@ const Popover = {
         prefixCls,
       },
       ref: 'tooltip',
-      on: this.$listeners,
+      on: getListeners(this),
     };
     return (
       <Tooltip {...tooltipProps}>

components/progress/progress.jsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import PropTypes from '../_util/vue-types';
-import { getOptionProps, initDefaultProps } from '../_util/props-util';
+import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import Icon from '../icon';
 import Line from './line';
@@ -136,7 +136,7 @@ export default {
       props: {
         ...restProps,
       },
-      on: this.$listeners,
+      on: getListeners(this),
       class: classString,
     };
     return <div {...progressProps}>{progress}</div>;

components/radio/Group.jsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from '../_util/vue-types';
 import Radio from './Radio';
-import { getOptionProps, filterEmpty, hasProp } from '../_util/props-util';
+import { getOptionProps, filterEmpty, hasProp, getListeners } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 function noop() {}
 
@@ -85,7 +85,7 @@ export default {
     },
   },
   render() {
-    const { mouseenter = noop, mouseleave = noop } = this.$listeners;
+    const { mouseenter = noop, mouseleave = noop } = getListeners(this);
     const props = getOptionProps(this);
     const { prefixCls: customizePrefixCls, options, buttonStyle } = props;
     const getPrefixCls = this.configProvider.getPrefixCls;

components/radio/Radio.jsx

@@ -1,7 +1,7 @@
 import PropTypes from '../_util/vue-types';
 import VcCheckbox from '../vc-checkbox';
 import classNames from 'classnames';
-import { getOptionProps, getAttrs } from '../_util/props-util';
+import { getOptionProps, getAttrs, getListeners } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 
 function noop() {}
@@ -48,10 +48,10 @@ export default {
   },
 
   render() {
-    const { $slots, $listeners, radioGroupContext: radioGroup } = this;
+    const { $slots, radioGroupContext: radioGroup } = this;
     const props = getOptionProps(this);
     const children = $slots.default;
-    const { mouseenter = noop, mouseleave = noop, ...restListeners } = $listeners;
+    const { mouseenter = noop, mouseleave = noop, ...restListeners } = getListeners(this);
     const { prefixCls: customizePrefixCls, ...restProps } = props;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('radio', customizePrefixCls);

components/rate/index.jsx

@@ -1,6 +1,6 @@
 import omit from 'omit.js';
 import PropTypes from '../_util/vue-types';
-import { getOptionProps, getComponentFromProp } from '../_util/props-util';
+import { getOptionProps, getComponentFromProp, getListeners } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import VcRate from '../vc-rate';
 import Icon from '../icon';
@@ -58,7 +58,7 @@ const Rate = {
         prefixCls,
         ...omit(restProps, ['tooltips']),
       },
-      on: this.$listeners,
+      on: getListeners(this),
       ref: 'refRate',
     };
     return <VcRate {...rateProps} />;

components/select/index.jsx

@@ -8,6 +8,7 @@ import {
   getOptionProps,
   filterEmpty,
   isValidElement,
+  getListeners,
 } from '../_util/props-util';
 import Icon from '../icon';
 import { cloneElement } from '../_util/vnode';
@@ -254,7 +255,7 @@ const Select = {
         dropdownRender: getComponentFromProp(this, 'dropdownRender', {}, false),
         getPopupContainer: getPopupContainer || getContextPopupContainer,
       },
-      on: this.$listeners,
+      on: getListeners(this),
       class: cls,
       ref: 'vcSelect',
     };

components/spin/Spin.jsx

@@ -6,6 +6,7 @@ import {
   initDefaultProps,
   isValidElement,
   getComponentFromProp,
+  getListeners,
 } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import { ConfigConsumerProps } from '../config-provider';
@@ -151,7 +152,10 @@ export default {
       };
 
       return (
-        <div {...{ on: this.$listeners }} class={[`${prefixCls}-nested-loading`, wrapperClassName]}>
+        <div
+          {...{ on: getListeners(this) }}
+          class={[`${prefixCls}-nested-loading`, wrapperClassName]}
+        >
           {sSpinning && <div key="loading">{spinElement}</div>}
           <div class={containerClassName} key="container">
             {children}

components/statistic/Countdown.jsx

@@ -1,7 +1,7 @@
 import * as moment from 'moment';
 import interopDefault from '../_util/interopDefault';
 import { cloneElement } from '../_util/vnode';
-import { initDefaultProps } from '../_util/props-util';
+import { initDefaultProps, getListeners } from '../_util/props-util';
 import Statistic, { StatisticProps } from './Statistic';
 import { formatCountdown } from './utils';
 
@@ -88,7 +88,7 @@ export default {
             valueRender: this.valueRenderHtml,
             formatter: this.formatCountdown,
           },
-          on: this.$listeners,
+          on: getListeners(this),
         }}
       />
     );

components/steps/index.jsx

@@ -1,5 +1,5 @@
 import PropTypes from '../_util/vue-types';
-import { initDefaultProps, getOptionProps } from '../_util/props-util';
+import { initDefaultProps, getOptionProps, getListeners } from '../_util/props-util';
 import VcSteps from '../vc-steps';
 import Icon from '../icon';
 import { ConfigConsumerProps } from '../config-provider';
@@ -47,7 +47,7 @@ const Steps = {
         prefixCls,
         ...props,
       },
-      on: this.$listeners,
+      on: getListeners(this),
       scopedSlots: this.$scopedSlots,
     };
     return <VcSteps {...stepsProps}>{this.$slots.default}</VcSteps>;

components/switch/index.jsx

@@ -1,5 +1,5 @@
 import PropTypes from '../_util/vue-types';
-import { getOptionProps, getComponentFromProp } from '../_util/props-util';
+import { getOptionProps, getComponentFromProp, getListeners } from '../_util/props-util';
 import VcSwitch from '../vc-switch';
 import Wave from '../_util/wave';
 import Icon from '../icon';
@@ -60,7 +60,7 @@ const Switch = {
         unCheckedChildren: getComponentFromProp(this, 'unCheckedChildren'),
         disabled: disabled || loading,
       },
-      on: this.$listeners,
+      on: getListeners(this),
       class: classes,
       ref: 'refSwitchNode',
     };

components/tag/Tag.jsx

@@ -3,7 +3,7 @@ import Icon from '../icon';
 import getTransitionProps from '../_util/getTransitionProps';
 import omit from 'omit.js';
 import Wave from '../_util/wave';
-import { hasProp } from '../_util/props-util';
+import { hasProp, getListeners } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import { ConfigConsumerProps } from '../config-provider';
 
@@ -103,7 +103,7 @@ export default {
     const tag = (
       <div
         v-show={visible}
-        {...{ on: omit(this.$listeners, ['close']) }}
+        {...{ on: omit(getListeners(this), ['close']) }}
         class={this.getTagClassName(prefixCls)}
         style={this.getTagStyle()}
       >

components/time-picker/index.jsx

@@ -14,6 +14,7 @@ import {
   getOptionProps,
   getComponentFromProp,
   isValidElement,
+  getListeners,
 } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import { ConfigConsumerProps } from '../config-provider';
@@ -220,7 +221,7 @@ const TimePicker = {
         class: pickerClassName,
         ref: 'timePicker',
         on: {
-          ...this.$listeners,
+          ...getListeners(this),
           change: this.handleChange,
           open: this.handleOpenClose,
           close: this.handleOpenClose,

components/timeline/Timeline.jsx

@@ -5,6 +5,7 @@ import {
   initDefaultProps,
   filterEmpty,
   getComponentFromProp,
+  getListeners,
 } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import TimelineItem from './TimelineItem';
@@ -92,7 +93,7 @@ export default {
         ...restProps,
       },
       class: classString,
-      on: this.$listeners,
+      on: getListeners(this),
     };
     return <ul {...timelineProps}>{items}</ul>;
   },

components/timeline/TimelineItem.jsx

@@ -1,6 +1,11 @@
 import classNames from 'classnames';
 import PropTypes from '../_util/vue-types';
-import { getOptionProps, initDefaultProps, getComponentFromProp } from '../_util/props-util';
+import {
+  getOptionProps,
+  initDefaultProps,
+  getComponentFromProp,
+  getListeners,
+} from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 
 export const TimeLineItemProps = {
@@ -37,7 +42,7 @@ export default {
     });
     const liProps = {
       class: itemClassName,
-      on: this.$listeners,
+      on: getListeners(this),
     };
     return (
       <li {...liProps}>

components/tooltip/Tooltip.jsx

@@ -8,6 +8,7 @@ import {
   getClass,
   getStyle,
   isValidElement,
+  getListeners,
 } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import abstractTooltipProps from './abstractTooltipProps';
@@ -161,7 +162,7 @@ export default {
   },
 
   render() {
-    const { $props, $data, $slots, $listeners } = this;
+    const { $props, $data, $slots } = this;
     const { prefixCls: customizePrefixCls, openClassName, getPopupContainer } = $props;
     const { getPopupContainer: getContextPopupContainer } = this.configProvider;
     const getPrefixCls = this.configProvider.getPrefixCls;
@@ -192,7 +193,7 @@ export default {
       },
       ref: 'tooltip',
       on: {
-        ...$listeners,
+        ...getListeners(this),
         visibleChange: this.onVisibleChange,
         popupAlign: this.onPopupAlign,
       },

components/transfer/index.jsx

@@ -4,6 +4,7 @@ import {
   initDefaultProps,
   getOptionProps,
   getComponentFromProp,
+  getListeners,
 } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import classNames from 'classnames';
@@ -240,7 +241,7 @@ const Transfer = {
         // add filter
         [`${direction}Filter`]: value,
       });
-      if (this.$listeners.searchChange) {
+      if (getListeners(this).searchChange) {
         warning(false, '`searchChange` in Transfer is deprecated. Please use `search` instead.');
         this.$emit('searchChange', direction, e);
       }

components/tree-select/index.jsx

@@ -8,6 +8,7 @@ import {
   getComponentFromProp,
   filterEmpty,
   isValidElement,
+  getListeners,
 } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import Base from '../base';
@@ -152,7 +153,7 @@ const TreeSelect = {
         treeData ? { treeData } : {},
       ),
       class: cls,
-      on: { ...this.$listeners, change: this.onChange },
+      on: { ...getListeners(this), change: this.onChange },
       ref: 'vcTreeSelect',
       scopedSlots: this.$scopedSlots,
     };

components/tree/Tree.jsx

@@ -8,6 +8,7 @@ import {
   filterEmpty,
   getComponentFromProp,
   getClass,
+  getListeners,
 } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import { ConfigConsumerProps } from '../config-provider';
@@ -205,7 +206,7 @@ export default {
         __propsSymbol__: Symbol(),
         switcherIcon: nodeProps => this.renderSwitcherIcon(prefixCls, switcherIcon, nodeProps),
       },
-      on: this.$listeners,
+      on: getListeners(this),
       ref: 'tree',
       class: !showIcon && `${prefixCls}-icon-hide`,
     };

components/upload/Dragger.jsx

@@ -1,4 +1,4 @@
-import { getOptionProps } from '../_util/props-util';
+import { getOptionProps, getListeners } from '../_util/props-util';
 import Upload from './Upload';
 import { UploadProps } from './interface';
 
@@ -12,7 +12,7 @@ export default {
         ...props,
         type: 'drag',
       },
-      on: this.$listeners,
+      on: getListeners(this),
       style: { height: this.height },
     };
     return <Upload {...draggerProps}>{this.$slots.default}</Upload>;

components/upload/Upload.jsx

@@ -238,7 +238,6 @@ export default {
         beforeUpload: this.reBeforeUpload,
       },
       on: {
-        // ...this.$listeners,
         start: this.onStart,
         error: this.onError,
         progress: this.onProgress,

components/upload/UploadList.jsx

@@ -1,5 +1,5 @@
 import BaseMixin from '../_util/BaseMixin';
-import { getOptionProps, initDefaultProps } from '../_util/props-util';
+import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-util';
 import getTransitionProps from '../_util/getTransitionProps';
 import { ConfigConsumerProps } from '../config-provider';
 import Icon from '../icon';
@@ -95,7 +95,7 @@ export default {
       this.$emit('remove', file);
     },
     handlePreview(file, e) {
-      const { preview } = this.$listeners;
+      const { preview } = getListeners(this);
       if (!preview) {
         return;
       }

components/vc-calendar/src/FullCalendar.jsx

@@ -1,7 +1,7 @@
 import moment from 'moment';
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
-import { getOptionProps, hasProp } from '../../_util/props-util';
+import { getOptionProps, hasProp, getListeners } from '../../_util/props-util';
 import DateTable from './date/DateTable';
 import MonthTable from './month/MonthTable';
 import CalendarMixin, { getNowByCurrentStateValue } from './mixin/CalendarMixin';
@@ -93,7 +93,7 @@ const FullCalendar = {
       headerRender,
       disabledDate,
     } = props;
-    const { sValue: value, sType: type, $listeners } = this;
+    const { sValue: value, sType: type } = this;
 
     let header = null;
     if (showHeader) {
@@ -109,7 +109,7 @@ const FullCalendar = {
             value,
           },
           on: {
-            ...$listeners,
+            ...getListeners(this),
             typeChange: this.setType,
             valueChange: this.setValue,
           },

components/vc-calendar/src/RangeCalendar.jsx

@@ -1,6 +1,12 @@
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
-import { getOptionProps, hasProp, mergeProps, getComponentFromProp } from '../../_util/props-util';
+import {
+  getOptionProps,
+  hasProp,
+  mergeProps,
+  getComponentFromProp,
+  getListeners,
+} from '../../_util/props-util';
 import moment from 'moment';
 import KeyCode from '../../_util/KeyCode';
 import CalendarPart from './range-calendar/CalendarPart';
@@ -613,7 +619,7 @@ const RangeCalendar = {
       seperator,
     } = props;
     const clearIcon = getComponentFromProp(this, 'clearIcon');
-    const { sHoverValue, sSelectedValue, sMode, showTimePicker, sValue, $listeners } = this;
+    const { sHoverValue, sSelectedValue, sMode, showTimePicker, sValue } = this;
     const className = {
       [prefixCls]: 1,
       [`${prefixCls}-hidden`]: !props.visible,
@@ -623,7 +629,7 @@ const RangeCalendar = {
     };
     const baseProps = {
       props,
-      on: $listeners,
+      on: getListeners(this),
     };
     const newProps = {
       props: {

components/vc-calendar/src/calendar/CalendarFooter.jsx

@@ -1,6 +1,6 @@
 import PropTypes from '../../../_util/vue-types';
 import BaseMixin from '../../../_util/BaseMixin';
-import { getOptionProps } from '../../../_util/props-util';
+import { getOptionProps, getListeners } from '../../../_util/props-util';
 import TodayButton from './TodayButton';
 import OkButton from './OkButton';
 import TimePickerButton from './TimePickerButton';
@@ -37,7 +37,6 @@ const CalendarFooter = {
 
   render() {
     const props = getOptionProps(this);
-    const { $listeners } = this;
     const { value, prefixCls, showOk, timePicker, renderFooter, showToday, mode } = props;
     let footerEl = null;
     const extraFooter = renderFooter && renderFooter(mode);
@@ -47,7 +46,7 @@ const CalendarFooter = {
           ...props,
           value: value,
         },
-        on: $listeners,
+        on: getListeners(this),
       };
       let nowEl = null;
       if (showToday) {

components/vc-calendar/src/calendar/CalendarHeader.jsx

@@ -1,6 +1,6 @@
 import PropTypes from '../../../_util/vue-types';
 import BaseMixin from '../../../_util/BaseMixin';
-import { getOptionProps } from '../../../_util/props-util';
+import { getOptionProps, getListeners } from '../../../_util/props-util';
 import MonthPanel from '../month/MonthPanel';
 import YearPanel from '../year/YearPanel';
 import DecadePanel from '../decade/DecadePanel';
@@ -51,7 +51,7 @@ const CalendarHeader = {
   methods: {
     onMonthSelect(value) {
       this.__emit('panelChange', value, 'date');
-      if (this.$listeners.monthSelect) {
+      if (getListeners(this).monthSelect) {
         this.__emit('monthSelect', value);
       } else {
         this.__emit('valueChange', value);

components/vc-calendar/src/date/DateTBody.jsx

@@ -1,5 +1,5 @@
 import PropTypes from '../../../_util/vue-types';
-import { getOptionProps } from '../../../_util/props-util';
+import { getOptionProps, getListeners } from '../../../_util/props-util';
 import cx from 'classnames';
 import DateConstants from './DateConstants';
 import { getTitleString, getTodayTime } from '../util/';
@@ -50,8 +50,7 @@ const DateTBody = {
       disabledDate,
       hoverValue,
     } = props;
-    const { $listeners = {} } = this;
+    const { select = noop, dayHover = noop } = getListeners(this);
-    const { select = noop, dayHover = noop } = $listeners;
     let iIndex;
     let jIndex;
     let current;

components/vc-calendar/src/month/MonthPanel.jsx

@@ -1,6 +1,6 @@
 import PropTypes from '../../../_util/vue-types';
 import BaseMixin from '../../../_util/BaseMixin';
-import { hasProp } from '../../../_util/props-util';
+import { hasProp, getListeners } from '../../../_util/props-util';
 import MonthTable from './MonthTable';
 
 function goYear(direction) {
@@ -66,7 +66,6 @@ const MonthPanel = {
       rootPrefixCls,
       disabledDate,
       renderFooter,
-      $listeners = {},
     } = this;
     const year = sValue.year();
     const prefixCls = `${rootPrefixCls}-month-panel`;
@@ -86,7 +85,7 @@ const MonthPanel = {
             <a
               class={`${prefixCls}-year-select`}
               role="button"
-              onClick={$listeners.yearPanelShow || noop}
+              onClick={getListeners(this).yearPanelShow || noop}
               title={locale.yearSelect}
             >
               <span class={`${prefixCls}-year-select-content`}>{year}</span>

components/vc-calendar/src/range-calendar/CalendarPart.jsx

@@ -1,6 +1,6 @@
 import PropTypes from '../../../_util/vue-types';
 import BaseMixin from '../../../_util/BaseMixin';
-import { getOptionProps, getComponentFromProp } from '../../../_util/props-util';
+import { getOptionProps, getComponentFromProp, getListeners } from '../../../_util/props-util';
 import { cloneElement } from '../../../_util/vnode';
 import CalendarHeader from '../calendar/CalendarHeader';
 import DateTable from '../date/DateTable';
@@ -34,7 +34,7 @@ const CalendarPart = {
     clearIcon: PropTypes.any,
   },
   render() {
-    const { $props: props, $listeners = {} } = this;
+    const { $props: props } = this;
     const {
       prefixCls,
       value,
@@ -65,7 +65,7 @@ const CalendarPart = {
       panelChange = noop,
       select = noop,
       dayHover = noop,
-    } = $listeners;
+    } = getListeners(this);
     const shouldShowTimePicker = showTimePicker && timePicker;
     const disabledTimeConfig =
       shouldShowTimePicker && disabledTime ? getTimeConfig(selectedValue, disabledTime) : null;

components/vc-calendar/src/year/YearPanel.jsx

@@ -1,5 +1,6 @@
 import PropTypes from '../../../_util/vue-types';
 import BaseMixin from '../../../_util/BaseMixin';
+import { getListeners } from '../../../_util/props-util';
 const ROW = 4;
 const COL = 3;
 function noop() {}
@@ -61,8 +62,8 @@ export default {
   },
 
   render() {
-    const { sValue: value, locale, renderFooter, $listeners = {} } = this;
+    const { sValue: value, locale, renderFooter } = this;
-    const decadePanelShow = $listeners.decadePanelShow || noop;
+    const decadePanelShow = getListeners(this).decadePanelShow || noop;
     const years = this.years();
     const currentYear = value.year();
     const startYear = parseInt(currentYear / 10, 10) * 10;

components/vc-cascader/Cascader.jsx

@@ -1,4 +1,4 @@
-import { getComponentFromProp } from '../_util/props-util';
+import { getComponentFromProp, getListeners } from '../_util/props-util';
 import PropTypes from '../_util/vue-types';
 import Trigger from '../vc-trigger';
 import Menus from './Menus';
@@ -313,14 +313,13 @@ export default {
   render() {
     const {
       $props,
-      $slots,
       sActiveValue,
       handleMenuSelect,
       sPopupVisible,
       handlePopupVisibleChange,
       handleKeyDown,
-      $listeners,
     } = this;
+    const listeners = getListeners(this);
     const {
       prefixCls,
       transitionName,
@@ -348,7 +347,7 @@ export default {
           expandIcon,
         },
         on: {
-          ...$listeners,
+          ...listeners,
           select: handleMenuSelect,
           itemDoubleClick: this.handleItemDoubleClick,
         },
@@ -370,7 +369,7 @@ export default {
         popupClassName: popupClassName + emptyMenuClassName,
       },
       on: {
-        ...$listeners,
+        ...listeners,
         popupVisibleChange: handlePopupVisibleChange,
       },
       ref: 'trigger',

components/vc-checkbox/src/Checkbox.jsx

@@ -1,6 +1,12 @@
 import PropTypes from '../../_util/vue-types';
 import classNames from 'classnames';
-import { getOptionProps, hasProp, initDefaultProps, getAttrs } from '../../_util/props-util';
+import {
+  getOptionProps,
+  hasProp,
+  initDefaultProps,
+  getAttrs,
+  getListeners,
+} from '../../_util/props-util';
 import BaseMixin from '../../_util/BaseMixin';
 
 export default {
@@ -137,7 +143,7 @@ export default {
           {...{
             attrs: globalProps,
             on: {
-              ...this.$listeners,
+              ...getListeners(this),
               change: this.handleChange,
               click: this.onClick,
             },

components/vc-dialog/DialogWrap.jsx

@@ -1,7 +1,7 @@
 import Dialog from './Dialog';
 import ContainerRender from '../_util/ContainerRender';
 import getDialogPropTypes from './IDialogPropTypes';
-import { getStyle, getClass } from '../_util/props-util';
+import { getStyle, getClass, getListeners } from '../_util/props-util';
 const IDialogPropTypes = getDialogPropTypes();
 let openCount = 0;
 const DialogWrap = {
@@ -37,7 +37,7 @@ const DialogWrap = {
   },
   methods: {
     getComponent(extra = {}) {
-      const { $attrs, $listeners, $props, $slots, getContainer } = this;
+      const { $attrs, $props, $slots, getContainer } = this;
       const { on, ...otherProps } = extra;
       const dialogProps = {
         props: {
@@ -51,7 +51,7 @@ const DialogWrap = {
         ref: '_component',
         key: 'dialog',
         on: {
-          ...$listeners,
+          ...getListeners(this),
           ...on,
         },
       };

components/vc-dialog/LazyRenderBox.jsx

@@ -1,4 +1,5 @@
 import PropTypes from '../_util/vue-types';
+import { getListeners } from '../_util/props-util';
 
 const ILazyRenderBoxPropTypes = {
   visible: PropTypes.bool,
@@ -9,6 +10,6 @@ const ILazyRenderBoxPropTypes = {
 export default {
   props: ILazyRenderBoxPropTypes,
   render() {
-    return <div {...{ on: this.$listeners }}>{this.$slots.default}</div>;
+    return <div {...{ on: getListeners(this) }}>{this.$slots.default}</div>;
   },
 };

components/vc-drawer/src/Drawer.js

@@ -2,7 +2,7 @@ import classnames from 'classnames';
 import Vue from 'vue';
 import ref from 'vue-ref';
 import BaseMixin from '../../_util/BaseMixin';
-import { initDefaultProps, getEvents } from '../../_util/props-util';
+import { initDefaultProps, getEvents, getListeners } from '../../_util/props-util';
 import { cloneElement } from '../../_util/vnode';
 import ContainerRender from '../../_util/ContainerRender';
 import getScrollBarSize from '../../_util/getScrollBarSize';
@@ -363,7 +363,7 @@ const Drawer = {
           }
         }
       }
-      const { change } = this.$listeners;
+      const { change } = getListeners(this);
       if (change && this.isOpenChange && this.sFirstEnter) {
         change(open);
         this.isOpenChange = false;

components/vc-form/src/createBaseForm.jsx

@@ -7,7 +7,13 @@ import omit from 'lodash/omit';
 import createFieldsStore from './createFieldsStore';
 import { cloneElement } from '../../_util/vnode';
 import BaseMixin from '../../_util/BaseMixin';
-import { getOptionProps, getEvents, slotHasProp, getComponentName } from '../../_util/props-util';
+import {
+  getOptionProps,
+  getEvents,
+  slotHasProp,
+  getComponentName,
+  getListeners,
+} from '../../_util/props-util';
 import PropTypes from '../../_util/vue-types';
 
 import {
@@ -704,7 +710,7 @@ function createBaseForm(option = {}, mixins = []) {
       },
 
       render() {
-        const { $listeners, $slots } = this;
+        const { $slots } = this;
         const formProps = {
           [formPropName]: this.getForm(),
         };
@@ -714,7 +720,7 @@ function createBaseForm(option = {}, mixins = []) {
             ...formProps,
             ...restProps,
           }),
-          on: $listeners,
+          on: getListeners(this),
           ref: 'WrappedComponent',
           directives: [
             {

components/vc-input-number/src/InputHandler.js

@@ -1,5 +1,6 @@
 import PropTypes from '../../_util/vue-types';
 import Touchable from '../../vc-m-feedback';
+import { getListeners } from '../../_util/props-util';
 
 const InputHandler = {
   props: {
@@ -13,7 +14,7 @@ const InputHandler = {
         disabled,
         activeClassName: `${prefixCls}-handler-active`,
       },
-      on: this.$listeners,
+      on: getListeners(this),
     };
     return (
       <Touchable {...touchableProps}>

components/vc-input-number/src/index.js

@@ -1,7 +1,7 @@
 // based on rc-input-number 4.4.0
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
-import { initDefaultProps, hasProp, getOptionProps } from '../../_util/props-util';
+import { initDefaultProps, hasProp, getOptionProps, getListeners } from '../../_util/props-util';
 import classNames from 'classnames';
 import isNegativeZero from 'is-negative-zero';
 import KeyCode from '../../_util/KeyCode';
@@ -674,7 +674,7 @@ export default {
       mouseleave = noop,
       mouseover = noop,
       mouseout = noop,
-    } = this.$listeners;
+    } = getListeners(this);
     const contentProps = {
       on: { mouseenter, mouseleave, mouseover, mouseout },
       class: classes,

components/vc-menu/DOMWrap.jsx

@@ -4,7 +4,7 @@ import SubMenu from './SubMenu';
 import BaseMixin from '../_util/BaseMixin';
 import { getWidth, setStyle, menuAllProps } from './util';
 import { cloneElement } from '../_util/vnode';
-import { getClass, getPropsData, getEvents } from '../_util/props-util';
+import { getClass, getPropsData, getEvents, getListeners } from '../_util/props-util';
 
 const canUseDOM = !!(
   typeof window !== 'undefined' &&
@@ -285,7 +285,7 @@ const DOMWrap = {
   render() {
     const Tag = this.$props.tag;
     const tagProps = {
-      on: this.$listeners,
+      on: getListeners(this),
     };
     return <Tag {...tagProps}>{this.renderChildren(this.$slots.default)}</Tag>;
   },

components/vc-menu/Menu.jsx

@@ -2,7 +2,12 @@ import PropTypes from '../_util/vue-types';
 import { Provider, create } from '../_util/store';
 import { default as SubPopupMenu, getActiveKey } from './SubPopupMenu';
 import BaseMixin from '../_util/BaseMixin';
-import hasProp, { getOptionProps, getComponentFromProp, filterEmpty } from '../_util/props-util';
+import hasProp, {
+  getOptionProps,
+  getComponentFromProp,
+  filterEmpty,
+  getListeners,
+} from '../_util/props-util';
 import commonPropsType from './commonPropsType';
 
 const Menu = {
@@ -168,7 +173,7 @@ const Menu = {
       },
       class: `${props.prefixCls}-root`,
       on: {
-        ...this.$listeners,
+        ...getListeners(this),
         click: this.onClick,
         openChange: this.onOpenChange,
         deselect: this.onDeselect,

components/vc-menu/MenuItem.jsx

@@ -4,7 +4,7 @@ import BaseMixin from '../_util/BaseMixin';
 import scrollIntoView from 'dom-scroll-into-view';
 import { connect } from '../_util/store';
 import { noop, menuAllProps } from './util';
-import { getComponentFromProp } from '../_util/props-util';
+import { getComponentFromProp, getListeners } from '../_util/props-util';
 
 const props = {
   attribute: PropTypes.object,
@@ -174,7 +174,7 @@ const MenuItem = {
     if (props.mode === 'inline') {
       style.paddingLeft = `${props.inlineIndent * props.level}px`;
     }
-    const listeners = { ...this.$listeners };
+    const listeners = { ...getListeners(this) };
     menuAllProps.props.forEach(key => delete props[key]);
     menuAllProps.on.forEach(key => delete listeners[key]);
     const liProps = {

components/vc-menu/MenuItemGroup.jsx

@@ -1,5 +1,5 @@
 import PropTypes from '../_util/vue-types';
-import { getComponentFromProp } from '../_util/props-util';
+import { getComponentFromProp, getListeners } from '../_util/props-util';
 // import { menuAllProps } from './util'
 
 const MenuItemGroup = {
@@ -27,7 +27,7 @@ const MenuItemGroup = {
     const titleClassName = `${rootPrefixCls}-item-group-title`;
     const listClassName = `${rootPrefixCls}-item-group-list`;
     // menuAllProps.props.forEach(key => delete props[key])
-    const listeners = { ...this.$listeners };
+    const listeners = { ...getListeners(this) };
     delete listeners.click;
 
     return (

components/vc-menu/SubMenu.jsx

@@ -6,7 +6,7 @@ import { connect } from '../_util/store';
 import SubPopupMenu from './SubPopupMenu';
 import placements from './placements';
 import BaseMixin from '../_util/BaseMixin';
-import { getComponentFromProp, filterEmpty } from '../_util/props-util';
+import { getComponentFromProp, filterEmpty, getListeners } from '../_util/props-util';
 import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout';
 import { noop, loopMenuItemRecursively, getMenuIdFromSubMenuEventKey } from './util';
 import getTransitionProps from '../_util/getTransitionProps';
@@ -333,7 +333,7 @@ const SubMenu = {
 
     renderChildren(children) {
       const props = this.$props;
-      const { select, deselect, openChange } = this.$listeners;
+      const { select, deselect, openChange } = getListeners(this);
       const subPopupMenuProps = {
         props: {
           mode: props.mode === 'horizontal' ? 'vertical' : props.mode,
@@ -416,7 +416,7 @@ const SubMenu = {
 
   render() {
     const props = this.$props;
-    const { rootPrefixCls, parentMenu, $listeners = {} } = this;
+    const { rootPrefixCls, parentMenu } = this;
     const isOpen = props.isOpen;
     const prefixCls = this.getPrefixCls();
     const isInlineMode = props.mode === 'inline';
@@ -504,7 +504,7 @@ const SubMenu = {
     const popupAlign = props.popupOffset ? { offset: props.popupOffset } : {};
     const popupClassName = props.mode === 'inline' ? '' : props.popupClassName;
     const liProps = {
-      on: { ...omit($listeners, ['click']), ...mouseEvents },
+      on: { ...omit(getListeners(this), ['click']), ...mouseEvents },
       class: className,
     };
 

components/vc-menu/SubPopupMenu.jsx

@@ -13,6 +13,7 @@ import {
   getPropsData,
   getEvents,
   getComponentFromProp,
+  getListeners,
 } from '../_util/props-util';
 
 function allDisabled(arr) {
@@ -390,7 +391,7 @@ const SubPopupMenu = {
       },
       class: className,
       // Otherwise, the propagated click event will trigger another onClick
-      on: omit(this.$listeners || {}, ['click']),
+      on: omit(getListeners(this), ['click']),
     };
     // if (props.id) {
     //   domProps.id = props.id

components/vc-notification/Notice.jsx

@@ -1,5 +1,5 @@
 import PropTypes from '../_util/vue-types';
-import { getStyle, getComponentFromProp } from '../_util/props-util';
+import { getStyle, getComponentFromProp, getListeners } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 
 function noop() {}
@@ -63,15 +63,7 @@ export default {
   },
 
   render() {
-    const {
+    const { prefixCls, closable, clearCloseTimer, startCloseTimer, $slots, close } = this;
-      prefixCls,
-      closable,
-      clearCloseTimer,
-      startCloseTimer,
-      $slots,
-      close,
-      $listeners,
-    } = this;
     const componentClass = `${prefixCls}-notice`;
     const className = {
       [`${componentClass}`]: 1,
@@ -85,7 +77,7 @@ export default {
         style={style || { right: '50%' }}
         onMouseenter={clearCloseTimer}
         onMouseleave={startCloseTimer}
-        onClick={$listeners.click || noop}
+        onClick={getListeners(this).click || noop}
       >
         <div class={`${componentClass}-content`}>{$slots.default}</div>
         {closable ? (

components/vc-select/DropdownMenu.jsx

@@ -5,7 +5,7 @@ import scrollIntoView from 'dom-scroll-into-view';
 import { getSelectKeys, preventDefaultEvent } from './util';
 import { cloneElement } from '../_util/vnode';
 import BaseMixin from '../_util/BaseMixin';
-import { getSlotOptions, getComponentFromProp } from '../_util/props-util';
+import { getSlotOptions, getComponentFromProp, getListeners } from '../_util/props-util';
 
 export default {
   name: 'DropdownMenu',
@@ -101,7 +101,7 @@ export default {
         visible,
       } = props;
       const menuItemSelectedIcon = getComponentFromProp(this, 'menuItemSelectedIcon');
-      const { menuDeselect, menuSelect, popupScroll } = this.$listeners;
+      const { menuDeselect, menuSelect, popupScroll } = getListeners(this);
       if (menuItems && menuItems.length) {
         const selectedKeys = getSelectKeys(menuItems, value);
         const menuProps = {
@@ -191,7 +191,7 @@ export default {
   },
   render() {
     const renderMenu = this.renderMenu();
-    const { popupFocus, popupScroll } = this.$listeners;
+    const { popupFocus, popupScroll } = getListeners(this);
     return renderMenu ? (
       <div
         style={{

components/vc-select/Select.jsx

@@ -19,6 +19,7 @@ import {
   getAttrs,
   getOptionProps,
   getSlots,
+  getListeners,
 } from '../_util/props-util';
 import getTransitionProps from '../_util/getTransitionProps';
 import { cloneElement } from '../_util/vnode';
@@ -790,7 +791,7 @@ const Select = {
               keydown: chaining(
                 this.onInputKeydown,
                 inputEvents.keydown,
-                this.$listeners.inputKeydown,
+                getListeners(this).inputKeydown,
               ),
               focus: chaining(this.inputFocus, inputEvents.focus),
               blur: chaining(this.inputBlur, inputEvents.blur),
@@ -1554,8 +1555,7 @@ const Select = {
     const realOpen = this.getRealOpenState();
     const empty = this._empty;
     const options = this._options || [];
-    const { $listeners } = this;
+    const { mouseenter = noop, mouseleave = noop, popupScroll = noop } = getListeners(this);
-    const { mouseenter = noop, mouseleave = noop, popupScroll = noop } = $listeners;
     const selectionProps = {
       props: {},
       attrs: {

components/vc-select/SelectTrigger.jsx

@@ -4,6 +4,7 @@ import PropTypes from '../_util/vue-types';
 import DropdownMenu from './DropdownMenu';
 import { isSingleMode, saveRef } from './util';
 import BaseMixin from '../_util/BaseMixin';
+import { getListeners } from '../_util/props-util';
 
 const BUILT_IN_PLACEMENTS = {
   bottomLeft: {
@@ -105,7 +106,7 @@ export default {
         backfillValue,
         menuItemSelectedIcon,
       } = this;
-      const { menuSelect, menuDeselect, popupScroll } = this.$listeners;
+      const { menuSelect, menuDeselect, popupScroll } = getListeners(this);
       const props = this.$props;
 
       const { dropdownRender, ariaId } = props;
@@ -157,7 +158,7 @@ export default {
   },
 
   render() {
-    const { $props, $slots, $listeners } = this;
+    const { $props, $slots } = this;
     const {
       multiple,
       visible,
@@ -173,7 +174,7 @@ export default {
       showAction,
       empty,
     } = $props;
-    const { mouseenter, mouseleave, popupFocus, dropdownVisibleChange } = $listeners;
+    const { mouseenter, mouseleave, popupFocus, dropdownVisibleChange } = getListeners(this);
     const dropdownPrefixCls = this.getDropdownPrefixCls();
     const popupClassName = {
       [dropdownClassName]: !!dropdownClassName,

components/vc-slick/src/inner-slider.js

@@ -2,7 +2,7 @@ import debounce from 'lodash/debounce';
 import classnames from 'classnames';
 import Vue from 'vue';
 import ref from 'vue-ref';
-import { getStyle } from '../../_util/props-util';
+import { getStyle, getListeners } from '../../_util/props-util';
 import BaseMixin from '../../_util/BaseMixin';
 import defaultProps from './default-props';
 import initialState from './initial-state';
@@ -236,7 +236,7 @@ export default {
       const slidesToLoad = state.lazyLoadedList.filter(
         value => this.lazyLoadedList.indexOf(value) < 0,
       );
-      if (this.$listeners.lazyLoad && slidesToLoad.length > 0) {
+      if (getListeners(this).lazyLoad && slidesToLoad.length > 0) {
         this.$emit('lazyLoad', slidesToLoad);
       }
       this.setState(state, () => {

components/vc-slick/src/slider.js

@@ -3,7 +3,7 @@ import Vue from 'vue';
 import ref from 'vue-ref';
 import BaseMixin from '../../_util/BaseMixin';
 import { cloneElement } from '../../_util/vnode';
-import { getStyle } from '../../_util/props-util';
+import { getStyle, getListeners } from '../../_util/props-util';
 import InnerSlider from './inner-slider';
 import defaultProps from './default-props';
 import { canUseDOM } from './utils/innerSliderUtils';
@@ -197,9 +197,7 @@ export default {
         children: newChildren,
         __propsSymbol__: Symbol(),
       },
-      on: {
+      on: getListeners(this),
-        ...this.$listeners,
-      },
       directives: [
         {
           name: 'ant-ref',

components/vc-slider/src/Handle.jsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
-import { getOptionProps } from '../../_util/props-util';
+import { getOptionProps, getListeners } from '../../_util/props-util';
 import addEventListener from '../../_util/Dom/addEventListener';
 
 export default {
@@ -92,7 +92,7 @@ export default {
       },
       class: className,
       on: {
-        ...this.$listeners,
+        ...getListeners(this),
         blur: this.handleBlur,
         keydown: this.handleKeyDown,
         mousedown: this.handleMousedown,

components/vc-steps/Step.jsx

@@ -1,5 +1,5 @@
 import PropTypes from '../_util/vue-types';
-import { getOptionProps, getComponentFromProp } from '../_util/props-util';
+import { getOptionProps, getComponentFromProp, getListeners } from '../_util/props-util';
 
 function isString(str) {
   return typeof str === 'string';
@@ -88,7 +88,7 @@ export default {
     };
     const stepProps = {
       class: classString,
-      on: this.$listeners,
+      on: getListeners(this),
     };
     const stepItemStyle = {};
     if (itemWidth) {

components/vc-steps/Steps.jsx

@@ -2,7 +2,7 @@ import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import debounce from 'lodash/debounce';
 import isFlexSupported from '../_util/isFlexSupported';
-import { filterEmpty, getEvents, getPropsData } from '../_util/props-util';
+import { filterEmpty, getEvents, getPropsData, getListeners } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 
 export default {
@@ -111,7 +111,7 @@ export default {
     const stepsProps = {
       class: classString,
       ref: 'vcStepsRef',
-      on: this.$listeners,
+      on: getListeners(this),
     };
     return (
       <div {...stepsProps}>

components/vc-switch/Switch.jsx

@@ -1,6 +1,6 @@
 import { switchPropTypes } from './PropTypes';
 import BaseMixin from '../_util/BaseMixin';
-import { hasProp, getOptionProps, getComponentFromProp } from '../_util/props-util';
+import { hasProp, getOptionProps, getComponentFromProp, getListeners } from '../_util/props-util';
 
 // function noop () {
 // }
@@ -89,7 +89,7 @@ export default {
     const spanProps = {
       props: { ...restProps },
       on: {
-        ...this.$listeners,
+        ...getListeners(this),
         keydown: this.handleKeyDown,
         click: this.handleClick,
         mouseup: this.handleMouseUp,

components/vc-tabs/src/ScrollableInkTabBar.jsx

@@ -3,6 +3,7 @@ import TabBarTabsNode from './TabBarTabsNode';
 import TabBarRootNode from './TabBarRootNode';
 import ScrollableTabBarNode from './ScrollableTabBarNode';
 import SaveRef from './SaveRef';
+import { getListeners } from '../../_util/props-util';
 
 export default {
   name: 'ScrollableInkTabBar',
@@ -21,7 +22,7 @@ export default {
   ],
   render() {
     const props = { ...this.$props };
-    const listeners = this.$listeners;
+    const listeners = getListeners(this);
     const { default: renderTabBarNode } = this.$scopedSlots;
     return (
       <SaveRef

components/vc-tabs/src/TabBar.jsx

@@ -1,14 +1,14 @@
 import TabBarRootNode from './TabBarRootNode';
 import TabBarTabsNode from './TabBarTabsNode';
 import SaveRef from './SaveRef';
-import { getAttrs } from '../../_util/props-util';
+import { getAttrs, getListeners } from '../../_util/props-util';
 
 export default {
   name: 'TabBar',
   inheritAttrs: false,
   render() {
     const props = getAttrs(this);
-    const listeners = this.$listeners;
+    const listeners = getListeners(this);
     return (
       <SaveRef
         children={saveRef => (

components/vc-tabs/src/Tabs.jsx

@@ -3,7 +3,7 @@ import BaseMixin from '../../_util/BaseMixin';
 import PropTypes from '../../_util/vue-types';
 import raf from 'raf';
 import KeyCode from './KeyCode';
-import { getOptionProps } from '../../_util/props-util';
+import { getOptionProps, getListeners } from '../../_util/props-util';
 import { cloneElement } from '../../_util/vnode';
 import Sentinel from './Sentinel';
 
@@ -248,7 +248,7 @@ export default {
       contents.push(tabBar, sentinelStart, tabContent, sentinelEnd);
     }
     const listeners = {
-      ...omit(this.$listeners, ['change']),
+      ...omit(getListeners(this), ['change']),
       scroll: this.onScroll,
     };
     return <div {...{ on: listeners, class: cls }}>{contents}</div>;

components/vc-time-picker/Panel.jsx

@@ -3,7 +3,7 @@ import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import Header from './Header';
 import Combobox from './Combobox';
-import { getComponentFromProp } from '../_util/props-util';
+import { getComponentFromProp, getListeners } from '../_util/props-util';
 
 function noop() {}
 
@@ -144,10 +144,9 @@ const Panel = {
       inputReadOnly,
       sValue,
       currentSelectPanel,
-      $listeners = {},
     } = this;
     const clearIcon = getComponentFromProp(this, 'clearIcon');
-    const { esc = noop, clear = noop, keydown = noop } = $listeners;
+    const { esc = noop, clear = noop, keydown = noop } = getListeners(this);
 
     const disabledHourOptions = this.disabledHours2();
     const disabledMinuteOptions = disabledMinutes(sValue ? sValue.hour() : null);

components/vc-tree-select/src/Base/BaseSelector.jsx

@@ -8,7 +8,7 @@
 import { createRef } from '../util';
 import PropTypes from '../../../_util/vue-types';
 import classNames from 'classnames';
-import { initDefaultProps, getComponentFromProp } from '../../../_util/props-util';
+import { initDefaultProps, getComponentFromProp, getListeners } from '../../../_util/props-util';
 import BaseMixin from '../../../_util/BaseMixin';
 export const selectorPropTypes = () => ({
   prefixCls: PropTypes.string,
@@ -134,7 +134,6 @@ export default function(modeName) {
       } = this.$props;
       const {
         vcTreeSelect: { onSelectorKeyDown },
-        $listeners,
       } = this;
 
       let myTabIndex = tabIndex;
@@ -145,7 +144,7 @@ export default function(modeName) {
       return (
         <span
           style={style}
-          onClick={$listeners.click || noop}
+          onClick={getListeners(this).click || noop}
           class={classNames(className, prefixCls, {
             [`${prefixCls}-open`]: open,
             [`${prefixCls}-focused`]: open || focused,

components/vc-tree-select/src/Popup/SinglePopup.jsx

@@ -2,6 +2,7 @@ import PropTypes from '../../../_util/vue-types';
 import BasePopup from '../Base/BasePopup';
 import SearchInput from '../SearchInput';
 import { createRef } from '../util';
+import { getListeners } from '../../../_util/props-util';
 
 const SinglePopup = {
   name: 'SinglePopup',
@@ -54,7 +55,7 @@ const SinglePopup = {
           <SearchInput
             {...{
               props: { ...this.$props, renderPlaceholder: this._renderPlaceholder },
-              on: this.$listeners,
+              on: getListeners(this),
               directives: [
                 {
                   name: 'ant-ref',
@@ -72,7 +73,7 @@ const SinglePopup = {
       <BasePopup
         {...{
           props: { ...this.$props, renderSearch: this._renderSearch, __propsSymbol__: Symbol() },
-          on: this.$listeners,
+          on: getListeners(this),
         }}
       />
     );

components/vc-tree-select/src/Select.jsx

@@ -56,6 +56,7 @@ import {
   mergeProps,
   getPropsData,
   filterEmpty,
+  getListeners,
 } from '../../_util/props-util';
 function getWatch(keys = []) {
   const watch = {};
@@ -958,7 +959,7 @@ const Select = {
       }
 
       // Only do the logic when `onChange` function provided
-      if (this.$listeners.change) {
+      if (getListeners(this).change) {
         let connectValueList;
 
         // Get value by mode
@@ -1034,7 +1035,7 @@ const Select = {
         ariaId: this.ariaId,
       },
       on: {
-        ...this.$listeners,
+        ...getListeners(this),
         choiceAnimationLeave: this.onChoiceAnimationLeave,
       },
       scopedSlots: this.$scopedSlots,

components/vc-tree-select/src/Selector/MultipleSelector/Selection.jsx

@@ -1,6 +1,6 @@
 import PropTypes from '../../../../_util/vue-types';
 import { toTitle, UNSELECTABLE_ATTRIBUTE, UNSELECTABLE_STYLE } from '../../util';
-import { getComponentFromProp } from '../../../../_util/props-util';
+import { getComponentFromProp, getListeners } from '../../../../_util/props-util';
 import BaseMixin from '../../../../_util/BaseMixin';
 
 const Selection = {
@@ -24,7 +24,6 @@ const Selection = {
 
   render() {
     const { prefixCls, maxTagTextLength, label, value } = this.$props;
-    const { $listeners } = this;
     let content = label || value;
     if (maxTagTextLength && typeof content === 'string' && content.length > maxTagTextLength) {
       content = `${content.slice(0, maxTagTextLength)}...`;
@@ -38,7 +37,7 @@ const Selection = {
         class={`${prefixCls}-selection__choice`}
         title={toTitle(label)}
       >
-        {$listeners.remove && (
+        {getListeners(this).remove && (
           <span class={`${prefixCls}-selection__choice__remove`} onClick={this.onRemove}>
             {getComponentFromProp(this, 'removeIcon')}
           </span>

components/vc-tree-select/src/Selector/SingleSelector.jsx

@@ -1,6 +1,6 @@
 import generateSelector, { selectorPropTypes } from '../Base/BaseSelector';
 import { toTitle } from '../util';
-import { getOptionProps } from '../../../_util/props-util';
+import { getOptionProps, getListeners } from '../../../_util/props-util';
 import { createRef } from '../util';
 const Selector = generateSelector('single');
 
@@ -47,7 +47,7 @@ const SingleSelector = {
         ...getOptionProps(this),
         renderSelection: this.renderSelection,
       },
-      on: this.$listeners,
+      on: getListeners(this),
       directives: [
         {
           name: 'ant-ref',

components/vc-trigger/PopupInner.jsx

@@ -1,5 +1,6 @@
 import PropTypes from '../_util/vue-types';
 import LazyRenderBox from './LazyRenderBox';
+import { getListeners } from '../_util/props-util';
 
 export default {
   props: {
@@ -9,9 +10,8 @@ export default {
   },
   render() {
     const { prefixCls, visible, hiddenClassName } = this.$props;
-    const { $listeners } = this;
     const divProps = {
-      on: $listeners,
+      on: getListeners(this),
     };
 
     return (

components/vc-trigger/Trigger.jsx

@@ -375,7 +375,7 @@ export default {
       }
       mouseProps.mousedown = this.onPopupMouseDown;
       mouseProps.touchstart = this.onPopupMouseDown;
-      const { handleGetPopupClassFromAlign, getRootDomNode, getContainer, $listeners } = self;
+      const { handleGetPopupClassFromAlign, getRootDomNode, getContainer } = self;
       const {
         prefixCls,
         destroyPopupOnHide,
@@ -415,7 +415,7 @@ export default {
           popupStyle,
         },
         on: {
-          align: $listeners.popupAlign || noop,
+          align: getListeners(this).popupAlign || noop,
           ...mouseProps,
         },
         directives: [
@@ -520,7 +520,7 @@ export default {
 
     createTwoChains(event) {
       let fn = () => {};
-      const events = this.$listeners;
+      const events = getListeners(this);
       if (this.childOriginEvents[event] && events[event]) {
         return this[`fire${event}`];
       }

components/vc-upload/src/AjaxUploader.jsx

@@ -6,6 +6,7 @@ import defaultRequest from './request';
 import getUid from './uid';
 import attrAccept from './attr-accept';
 import traverseFileTree from './traverseFileTree';
+import { getListeners } from '../../_util/props-util';
 
 const upLoadPropTypes = {
   componentTag: PropTypes.string,
@@ -206,7 +207,7 @@ const AjaxUploader = {
         };
     const tagProps = {
       on: {
-        ...this.$listeners,
+        ...getListeners(this),
         ...events,
       },
       attrs: {

components/vc-upload/src/Upload.jsx

@@ -1,5 +1,5 @@
 import PropTypes from '../../_util/vue-types';
-import { initDefaultProps } from '../../_util/props-util';
+import { initDefaultProps, getListeners } from '../../_util/props-util';
 import BaseMixin from '../../_util/BaseMixin';
 import AjaxUpload from './AjaxUploader';
 import IframeUpload from './IframeUploader';
@@ -83,7 +83,7 @@ export default {
       props: {
         ...this.$props,
       },
-      on: this.$listeners,
+      on: getListeners(this),
       ref: 'uploaderRef',
       attrs: this.$attrs,
     };