Vue子组件

在子组件中，我们已经知道了如何在父组件中使用子组件。在 Zova 中，子组件被作为模块 Scope 的资源统一管理。因此，我们还可以通过 Scope 实例更便捷的使用子组件

使用子组件

在子组件中，我们创建了一个子组件card，现在通过 Scope 实例直接使用子组件card

export class RenderComponent {
  render() {
    return (
      <div>
        <this.scope.component.card
          header="header"
          content="content"
          footer="footer"
          onReset={time => {
            console.log(time);
          }}
        ></this.scope.component.card>
      </div>
    );
  }
}

• 动图演示

跨模块使用子组件

import type { ScopeModuleADemo } from 'zova-module-a-demo';

export class RenderComponent {
  @UseScope('a-demo')
  scopeModuleADemo: ScopeModuleADemo;

  render() {
    return (
      <div>
        <this.scopeModuleADemo.component.card
          header="header"
          content="content"
          footer="footer"
          onReset={time => {
            console.log(time);
          }}
        ></this.scopeModuleADemo.component.card>
      </div>
    );
  }
}

$component

为了简化代码，Zova 提供了home-component模块，可以将常用的组件放入home-component模块。 然后，Zova 在 BeanBase 基类中注入了$component对象，从而可以在任何 bean 实例中通过this.$component直接访问home-component模块中定义的组件

export class RenderState {
  render() {
    return (
      <this.$component.page>
        <div>Hello Zova</div>
      </this.$component.page>
    );
  }
}