diff --git a/front-end/main-app/src/app/App.tsx b/front-end/main-app/src/app/App.tsx index 20e7621..80192a8 100644 --- a/front-end/main-app/src/app/App.tsx +++ b/front-end/main-app/src/app/App.tsx @@ -1,5 +1,5 @@ -import {Component, VueComponent} from 'vue3-oop' -import {RouterLink, RouterView} from "vue-router"; +import { Component, VueComponent } from 'vue3-oop' +import { RouterLink, RouterView } from "vue-router"; @Component() export class App extends VueComponent { diff --git a/front-end/main-app/src/app/components/Header.tsx b/front-end/main-app/src/app/components/Header.tsx index 2db39b2..9f8504e 100644 --- a/front-end/main-app/src/app/components/Header.tsx +++ b/front-end/main-app/src/app/components/Header.tsx @@ -1,6 +1,6 @@ -import {Component, ComponentProps, Hook, useProps, VueComponent} from 'vue3-oop' -import {JSX} from "vue/jsx-runtime"; -import {VNodeChild} from "vue"; +import { Component, ComponentProps, Hook, useProps, VueComponent } from 'vue3-oop' +import { JSX } from "vue/jsx-runtime"; +import { VNodeChild } from "vue"; interface ListItemType { id: number @@ -22,8 +22,8 @@ export default class Header extends VueComponent { // required 的 true or false 需要和 类型中 text的? 对应 static defaultProps: ComponentProps = { - text: {default: '默认数值', required: true}, - list: {default: () => []} + text: { default: '默认数值', required: true }, + list: { default: () => [] } }; @Hook('Mounted') @@ -32,16 +32,15 @@ export default class Header extends VueComponent { console.log('Header 组件的 mounted 生命周期...') } - render() { - const {text, list} = useProps(); + const { text, list } = useProps(); return (
头部组件 -

{text}

- {this.context.slots.default?.()} - {this.context.slots.haveName?.()} +

{ text }

+ { this.context.slots.default?.() } + { this.context.slots.haveName?.() }
    { list.map( diff --git a/front-end/main-app/src/app/views/Home.tsx b/front-end/main-app/src/app/views/Home.tsx index 608cc17..47bc300 100644 --- a/front-end/main-app/src/app/views/Home.tsx +++ b/front-end/main-app/src/app/views/Home.tsx @@ -1,54 +1,53 @@ -import {Autobind, Component, Link, Mut, VueComponent} from 'vue3-oop' +import { Autobind, Component, Link, Mut, VueComponent } from 'vue3-oop' import Header from '@/components/Header' interface ListItemType { - id: number - title: string + id: number + title: string } @Component() export default class Home extends VueComponent { - @Mut() - count: number = 1 + @Mut() + count: number = 1 - @Mut() - text: string = "Home props 传给 Header 的字符串" + @Mut() + text: string = "Home props 传给 Header 的字符串" - @Mut() - newList: ListItemType[] = [ - {id: 1, title: '新闻1'}, - {id: 2, title: '新闻2'}, - {id: 3, title: '新闻3'}, - ] + @Mut() + newList: ListItemType[] = [ + { id: 1, title: '新闻1' }, + { id: 2, title: '新闻2' }, + { id: 3, title: '新闻3' }, + ] - @Link() H1?: HTMLDivElement + @Link() H1?: HTMLDivElement + @Autobind() + async addCount() { + this.count++ + this.text = "22222" + console.log(this.H1) + } - @Autobind() - async addCount() { - this.count++ - this.text = "22222" - console.log(this.H1) - } + render() { + return ( +
    +

    首页

    +

    count响应式变量(点我):{ this.count }

    +
    父到子 default 插槽
    , + haveName: () =>
    父到子 具名 插槽
    , + item: (val) =>
  • { val.title }
  • + } } + list={ this.newList } + text={ this.text }> - render() { - return ( -
    -

    首页

    -

    count响应式变量(点我):{this.count}

    -
    父到子 default 插槽
    , - haveName: () =>
    父到子 具名 插槽
    , - item: (val) =>
  • {val.title}
  • - }} - list={this.newList} - text={this.text}> - -
    -
    - ) - } +
    +
    + ) + } } \ No newline at end of file diff --git a/front-end/main-app/tsconfig.json b/front-end/main-app/tsconfig.json index 3c0207d..50706f9 100644 --- a/front-end/main-app/tsconfig.json +++ b/front-end/main-app/tsconfig.json @@ -16,8 +16,7 @@ "lib": [ "ES2020", "dom", - "dom.iterable", - "scripthost" + "dom.iterable" ], "skipLibCheck": true, "paths": {