组件

代码风格

Zova 提供了一种更直观、更优雅、更强大的代码风格，汲取了 Vue3+React+Angular 以下核心设计：

• Vue3: 直观的状态管理
• React: 灵活的 TSX 渲染
• Angular: 强大的 IOC 容器

创建组件

以模块demo-student为例，创建一个组件card

1. Cli命令

$ zova :create:component card --module=demo-student

2. 菜单命令

TIP

右键菜单 - [模块路径]: Zova Create/Component

依据提示输入组件名称card，VSCode 插件会自动创建组件的代码骨架

Controller定义

@Controller()
class ControllerCard extends BeanControllerBase {
  protected render() {
    return null;
  }
}

组件Wrapper

Zova 为每个组件自动生成了一个组件 Wrapper。比如，组件card对应的组件 Wrapper 就是ZCard

INFO

所有组件 Wrapper 都使用Z前缀，从而方便在 JSX 中快速查找组件

使用组件

import { ZCard } from 'zova-module-demo-student';

class RenderPageCounter {
  render() {
    return (
      <ZCard></ZCard>
    );
  }
}

INFO

基于编译器的加持， ZCard 会自动转为异步加载模式，具体而言就是：系统会异步加载模块demo-student，然后取得组件card，再进行组件渲染

如何引用组件实例

在 Zova 中，不使用Template Ref引用组件实例，而是直接引用组件对应的controller，这样可以支持更直观并且更强大的类型提示

import type { ControllerCard } from 'zova-module-demo-student';
import { ZCard } from 'zova-module-demo-student';

class RenderPageCounter {
  cardRef: ControllerCard;

  render() {
    return (
      <ZCard
        controllerRef={ref => {
          this.cardRef = ref;
        }}
      ></ZCard>
    );
  }
}