Vue Js 在用功能组件包装组件时传递所有上下文

Question

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

显然，如果我使用 Select 和 Option，因为它们与 Element 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

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

这在 hocs 的上下文中很有用，在这种情况下，您希望将主要功能委托给接收到的组件，而您只想更改一些细节并将其设为默认值。

因此，这是正确的 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
    );

Vue Js 在用功能组件包装组件时传递所有上下文

Vue Js pass all context when wrapping components with functional components

vue.js

element-ui