自定义vue组件如何实现body嵌套, 同时能在编辑器展示树状结构

[minzhenyu]

自定义vue组件是没啥问题,但是editor不是开源的,在vue组件中body嵌套怎么去实现呢,使用slot,children? 嵌套结构又如何同步到左侧目录结构中呢?

[minzhenyu]

https://aisuda.bce.baidu.com/amis/zh-CN/docs/extend/custom-react 文档中react下 {body ? (

{render('body', body, { // 这里的信息会作为 props 传递给子组件，一般情况下都不需要这个 })}

    ) : null}

  这个实现了,可是vue怎么做呢,这块没找到相应文档

[wibetter]

目前正在支持中，后续会在amis-widget-cli中新增react、vue容器组件模板。

[wibetter]

vue容器类型组件目前已在amis-widget中支持，需要等Editor更新一版。

[minzhenyu]

今天还试了下demo下的组件,也不能做到自己嵌套自己,报错是'类型错误，无法渲染',是哪里要特殊处理吗? {render('body', body)}

scaffold = {
    type: 'react-info-card',
    label: 'react-info-card',
    name: 'react-info-card',
    body:{
      type: 'react-info-card',
      label: '自己套自己',
      name: '自己套自己'
    }
  };

[minzhenyu]

下面这段可以实现自己嵌套自己

`import {Renderer} from 'amis'; import { RendererProps } from 'amis/lib/factory'; import React from 'react';

export interface MyPageProps extends RendererProps { target?: string; }

@Renderer({ test: /\bmy-page$/, name: 'my-page', type:'my-page' }) export default class MyPage extends React.Component { static defaultProps = { target: 'MyPage' }

render() { const { target, title, body, render } = this.props; console.log('render:',render) return (

{target}

{title}

{render('body', body) /*渲染孩子节点*/}

);

} }`

[minzhenyu]

我又试了下https://github.com/aisuda/react-custom-widget-template 的模板 上面的嵌套依旧报错,后来发现是注册组件type变成了''npm-custom-react-info-card", 但是初始化'react-info-card'依旧可以使用,感觉有点混乱

scaffold = { type: 'react-info-card', label: 'react-info-card', name: 'react-info-card', body:[ { type: 'npm-custom-react-info-card', label: 'react-info-card', name: 'react-info-card', } ] }; 两个父子type同时指向一个组件,这个可以渲染,但是type又不一致了

[wibetter]

为啥要初始化的时候就嵌套自己呢？自定义组件注册时会自动加上默认的前缀 npm-custom，你要嵌套自己就得手动补上这个前缀。

[wibetter]

vue容器类的组件目前已经支持了，具体用法可以看下这个示例：https://github.com/aisuda/vue-container-custom-widget-template

[wibetter]

[minzhenyu]

谢谢,容器解决了一些问题,初始化确实基本不用自身嵌套,我只是作为测试demo使用时发现

[minzhenyu]

那如果纯粹就使用vue组件呢?

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

ComponentA, ComponentC在模板中使用后是没办法展示在目录中对吧, 还是只能通过注册,使用json嵌套body放进容器这种形式才能在目录中展示对吗

[minzhenyu]

我这边的需求其实是vue实现一个crud功能,crud使用的子组件信息需要在目录可配置, 问题:纯vue实现了crud,但是editor 目录无法展示子目录,并配置其信息

[minzhenyu]

我这边的需求其实是vue实现一个crud功能,crud使用的子组件信息需要在目录可配置, 问题:纯vue实现了crud,但是editor 目录无法展示子目录,并配置其信息

[wibetter]

你可以把这些子组件，全部改成自定义组件，然后就可以在页面设计器中嵌套使用了。

[wibetter]

Editor自身是React技术栈，vue技术栈的组件需要使用amis-widget改成自定义组件才能在页面设计器中正常使用。

[minzhenyu]

好的,thx