自定义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