Page Component
Create Page Component
Let's first create a page component counter
using a cli command:
bash
$ zova :create:page counter --module=a-demo
- The
module
option indicates that the page component belongs to the modulea-demo
- This command will create a route and a directory
Route
src/suite/a-demo/modules/a-demo/src/routes.ts
typescript
import Counter from './page/counter/index.vue';
export const routes: IModuleRoute[] = [
//
{ path: 'counter', component: Counter },
];
- path:
counter
is a relative path, and since the page component belongs to the modulea-demo
, its absolute path is/a/demo/counter
Directory
In Zova, a page component will be splited to four files:
src/suite/a-demo/modules/a-demo/src/page/counter
src
└─ page
└─ counter
├─ index.vue
├─ controller.ts
├─ render.tsx
└─ style.ts
Name | Description |
---|---|
index.vue | define vue component |
controller.ts | local bean for business logic |
render.tsx | local bean for page render |
style.ts | local bean for page style |
index.vue
vue
<script setup lang="ts">
import { useControllerPage } from 'zova';
import { ControllerPageCounter } from './controller.js';
import { RenderCounter } from './render.jsx';
import { StyleCounter } from './style.js';
useControllerPage(ControllerPageCounter, RenderCounter, StyleCounter);
</script>
- Just import and use the
controller
bean,render
bean andstyle
bean inindex.vue
as well useControllerPage
will automatically introduce an IOC container and inject the required bean instances into the container
controller.ts
typescript
@Local()
export class ControllerPageCounter {
count: number = 0;
increment() {
this.count++;
}
decrement() {
this.count--;
}
}
- Define
controller
as a local bean using@Local
to register it in the ioc container - Define a reactive state
count
of typenumber
- Directly modify the value of
count
by vanilla javascript
render.tsx
typescript
@Local()
export class RenderCounter {
render() {
return (
<div>
<div>count(ref): {this.count}</div>
<button onClick={() => this.increment()}>Increment</button>
<button onClick={() => this.decrement()}>Decrement</button>
</div>
);
}
}
- Define
render
as a local bean using@Local
to register it in the ioc container - Write rendering logic using the
tsx
syntax in therender
method - Directly obtain the value of
count
by vanilla javascript
style.ts
typescript
@Local()
export class StyleCounter {}
- Define
style
as a local bean using@Local
to register it in the ioc container - Support powerful
css-in-js
capabilities, see: CSS-in-JS: Style & Theme
Progressive development
Zova adheres to the concept of progressive development. If the logic of some Vue components is relatively simple, or if you want to use the old Vue component code, you can directly use SFC development as usual without introducing an IOC container