Question

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

很明显，如果我在元素UI中使用Select和Option，它们将按预期工作。

我需要包装这些组件的原因是，我需要添加一些默认类，并使用一些自定义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
    );

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

1 个答案: