Skip to content

Vue Child Component

In Child Component, we already know how to use child components in parent components. In Zova, child components are managed uniformly as resources of the module Scope. Therefore, we can also use child components more conveniently through Scope instance

Use Child Component

In Child Component, we created a child component card, and now use the child component card directly through the Scope instance

typescript
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>
    );
  }
}
  • Gif Demonstration scope-component

Use Child Component cross-module

typescript
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

To simplify the code, Zova provides the home-component module, into which commonly used components can be placed. Then, Zova injects the $component object into the BeanBase base class, so that the components defined in the home-component module can be directly accessed through this.$component in any bean instance

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

Released under the MIT License.