当使用功能组件包装组件时，Vue Js会传递所有上下文

Question

我正在基于Element UI创建一些自定义组件。我目前有两个问题： - 将所有上下文从包装器传递到组件; - 当我单击以下代码段中的select元素时，事件不会触发currentValue的更改。我也尝试使用@ onchange =“setValue”：value =“currentValue”，但没有任何改变。

显然，如果我使用选择和选项，因为它们与元素UI一起使用，它们确实可以正常工作。

我需要包装组件的原因是我需要添加一些默认类并使用一些自定义CSS来标记它们。

--- CustomSelect.js

import Vue from 'vue';
import { Select } from 'element-ui';
import classnames from 'classnames';
import 'element-theme-chalk/src/select.scss';
import './select.scss';

export default Vue.component('ExampleSelect', {
  functional: true,

  render(h, context) {
    console.log('ExampleSelect context', context);
    function wrappedComponent() {
      return Select;
    }

    function getExtendedClassName() {
      return classnames('example-select', {
        [context.props.classNames]: context.props.classNames
      });
    }

    return h(
      wrappedComponent(),
      {
        class: getExtendedClassName(),
        parent: context.parent && Object.keys(context.parent).length > 0 && context.parent,
        data: context.data && Object.keys(context.data).length > 0 && context.data,
        props: context.props && Object.keys(context.props).length > 0 && context.props,
        injections:
          context.injections && Object.keys(context.injections).length > 0 && context.injections,
        listeners:
          context.listeners && Object.keys(context.listeners).length > 0 ? context.listeners : {}
      },
      context.children && Object.keys(context.children).length > 0 && context.children
    );
  }
});

--- CustomOption.js

import Vue from 'vue';
import { Option as ExampleOption } from 'element-ui';
import classnames from 'classnames';
import 'element-theme-chalk/src/option.scss';
import './option.scss';

export default Vue.component('ExampleOption', {
  functional: true,

  render(h, context) {
    console.log('ExampleSelect option', context);
    function wrappedComponent() {
      return ExampleOption;
    }

    function getExtendedClassName() {
      return classnames('example-option', {
        [context.props.classNames]: context.props.classNames
      });
    }

    return h(
      wrappedComponent(),
      {
        class: getExtendedClassName(),
        parent: context.parent && Object.keys(context.parent).length > 0 && context.parent,
        data: context.data && Object.keys(context.data).length > 0 && context.data,
        props: context.props && Object.keys(context.props).length > 0 && context.props,
        injections:
          context.injections && Object.keys(context.injections).length > 0 && context.injections,
        listeners:
          context.listeners && Object.keys(context.listeners).length > 0 ? context.listeners : {}
      },
      context.children && Object.keys(context.children).length > 0 && context.children
    );
  }
});

预先感谢您的帮助。

Answer 1

我解决了这个问题。所以它看起来像数据对象https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth中属性的名称

与上下文中的属性名称不同：https://vuejs.org/v2/guide/render-function.html#Functional-Components

也许对未来的建议是使它们匹配，或创建一个映射它们的实用程序，允许一次性传递它们。

这在您要将主要功能委派给接收组件的上下文中非常有用，您只想更改一些细节并将其设置为默认值。

因此，这是正确的return语句：

    return h(
      wrappedComponent(),
      {
        class: getExtendedClassName(),
        name: 'ExampleInput',
        componentName: 'ExampleInput',
        props: context.props,
        slots: context.slots(),
        scopedSlots: context.scopedSlots,
        data: context.data,
        parent: context.parent,
        on: context.listeners,
        inject: context.injections,
      },
      context.children
    );