vue3中用jsx实现递归组件

关键步骤:
默认输出组件改为变量输出

export default defineComponent({...});

改写为

const ComponentName=defineComponent({...});
export default ComponentName;

此时的"ComponentName"就能作为递归组件在当前组件内使用,
要注意的是,一定要控制好递归组件的终结点,避免引起无限递归错误。
例如:
vue3中用jsx实现递归组件_第1张图片
vue3中用jsx实现递归组件_第2张图片
弹窗组件用作递归时要注意,显示和隐藏要在渲染后才会生效,因此要放在nextTick控制
例如:
vue3中用jsx实现递归组件_第3张图片

你可能感兴趣的:(web前端,jsx,vue3,递归组件)