用的是vue版本，JSON Schema 开发模式。怎么写能兼容组件的slot呢

[qq1037305420]

提前谢谢大佬们

想实现下面这个效果

Element UI 复合式输入框

需要把一个值传入 append 插槽里面

const schema = {
  type: 'object',
  properties: {
    name: {
      required: true,
      name: 'name',
      title: '名称',
      type: 'void',
      'x-component': 'Row',
      'x-component-props': {},
      'x-decorator': 'ElFormItem',
      'x-decorator-props': {},
      properties: {
        firstName: {
          type: 'string',
          required: true,
          'x-decorator': 'Col',
          'x-decorator-props': { span: 11, offset: 1 } as Col,
          'x-component': 'Input',
          'x-component-props': {
            placeholder: '姓'
          }
        },
        lastName: {
          type: 'string',
          required: true,
          'x-decorator': 'Col',
          'x-decorator-props': { span: 11, offset: 1 } as Col,
          'x-component': 'Input',
          'x-component-props': {
            placeholder: '名'
          },
          properties: {
            appendText: {
              type: 'void',
              'x-component': 'Input',
              'x-component-props': {
                slot: 'append'
              }
            }
          }
        }
      }
    }
  }
}

[MisicDemone]

建个issue吧，这个当前是没考虑到的。临时解决的话，在appendText的外层套一个void类型的functional component，用于把子组件放到父组件的指定插槽，不知道可不可行

[janryWang]

json schema是支持x-content作为children的保留字段，这个你看看react的实现

[MisicDemone]

json schema是支持x-content作为children的保留字段，这个你看看react的实现

vue版本也有x-content，但是这个默认放入default插槽，具名插槽需要额外实现

[MisicDemone]

可参考

https://vue.formilyjs.org/questions/#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD

[MisicDemone]

x-content目前的实现应该还不支持scoped-slot，有好的思路可以提一下

[muuyao]

当前实现有问题，可以拿 element-ui 试下，具名slot渲染不出来，你这里链接中的之所以可以，是因为 ant-design-vue 同步判断了 $scopedSlots 和 $slots

[muuyao]

排查了一下，其实还是 element-ui 的问题，在 h.ts 看到，目前非 default 的 key 都是传递给 scopedSlots 来处理的,

const hInVue2 = h as (
    tag: Tag,
    data?: VNodeData,
    components?: VNodeChildren
  ) => VNode
  const scopedSlots = {}
  const children = []
  Object.keys(components).forEach((key) => {
    const func = components[key]
    if (typeof func === 'function') {
      if (func.length !== 0) {
        scopedSlots[key] = func
      } else if (key !== 'default') {
        scopedSlots[key] = func
      } else {
        children.push(func())
      }
    }
  })
  const newData = Object.assign({}, data)
  if (Object.keys(scopedSlots).length > 0) {
    if (!newData.scopedSlots) {
      newData.scopedSlots = scopedSlots
    } else {
      newData.scopedSlots = {
        ...newData.scopedSlots,
        ...scopedSlots,
      }
    }
  }

从 vue2.6.0 开始所有的 $slots 现在都会作为函数暴露在 $scopedSlots 中，所以没啥问题，但通过scopedSlots 来传递后，$slots 里就取不到值了 element-ui 有不少 v-if="$slots.*" 的判断，导致 slot 没渲染出来，貌似没有太好的解决方案。

另外关于 scoped-slot 的支持，建议和官方一致，格式为 { name: props => VNode | Array<VNode> }, 见 插槽

import { h } from 'vue-demi';

const schema = {
  type: 'object',
  properties: {
    input: {
      type: 'string',
      'x-component': 'Base',
      'x-content': {
        default: () => {
          return h('p', {}, 'default slot');
        },

        todo: props => {
          return h('p', {}, props.todo.text);
        }
      }
    }
  }
};

[MisicDemone]

写法方面的话，以上的写法目前在vue3下应该是支持的...因为vue3的函数式组件就是这种写法，但是vue2可能还是得写成这样：

const schema = {
  type: 'object',
  properties: {
    input: {
      type: 'string',
      'x-component': 'Base',
      'x-content': {
        todo: {
          functional: true,
          render (h, context) {
            return h('p', {}, context.props.todo.text)
          }
        },
      }
    }
  }
};

对于目前的变化仅仅是将scope参数通过prop传入了

[muuyao]

见 vue2-插槽，

render: function (createElement) {
  // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`
  return createElement('div', [
    createElement('child', {
      // 在数据对象中传递 `scopedSlots`
      // 格式为 { name: props => VNode | Array<VNode> }
      scopedSlots: {
        default: function (props) {
          return createElement('span', props.text)
        }
      }
    })
  ])
}

vue2 应该也是支持的