|
1 | 1 | import '@abraham/reflection' |
2 | | -import { createApp } from 'vue' |
3 | | -import './theme/app.css' |
4 | | -import 'ant-design-vue/dist/antd.css' |
5 | | -import { App } from './app' |
| 2 | +import { Autobind, Component, ComponentProps, Computed, Hook, Link, Ref, VueComponent, VueService } from '@/index' |
| 3 | +import { forwardRef, Inject, Injectable, SkipSelf } from 'injection-js' |
| 4 | +import { createApp, watch } from 'vue' |
6 | 5 |
|
7 | | -const app = createApp(App) |
| 6 | +// 服务，即可复用的逻辑 类似 useXXX |
| 7 | +@Injectable() |
| 8 | +class CountService extends VueService { |
| 9 | + @Ref() count = 0 |
| 10 | + |
| 11 | + @Autobind() |
| 12 | + add() { |
| 13 | + this.count++ |
| 14 | + } |
| 15 | + |
| 16 | + @Autobind() |
| 17 | + remove() { |
| 18 | + this.count-- |
| 19 | + } |
| 20 | +} |
| 21 | + |
| 22 | +// 组件属性声明 |
| 23 | +interface HomeChild_Props { |
| 24 | + size: 'small' | 'large' |
| 25 | +} |
| 26 | + |
| 27 | +// 带属性组件 |
| 28 | +@Component({ providers: [CountService] }) |
| 29 | +class HomeChild extends VueComponent<HomeChild_Props> { |
| 30 | + static defaultProps: ComponentProps<HomeChild_Props> = { |
| 31 | + size: String, |
| 32 | + } |
| 33 | + |
| 34 | + constructor( |
| 35 | + private countService: CountService, |
| 36 | + @SkipSelf() private parentCountService: CountService, |
| 37 | + @Inject(forwardRef(() => Home)) private parent: InstanceType<typeof Home>, |
| 38 | + ) { |
| 39 | + super() |
| 40 | + } |
| 41 | + |
| 42 | + render() { |
| 43 | + return ( |
| 44 | + <div style={{ marginTop: '40px' }}> |
| 45 | + <h1>子组件</h1> |
| 46 | + <h4>子组件属性是：{this.props.size}</h4> |
| 47 | + <h4>父组件外部服务状态: {this.parentCountService.count}</h4> |
| 48 | + <h4>父组件内部服务状态: {this.parent.count}</h4> |
| 49 | + <h3>子组件内部服务</h3> |
| 50 | + <button onClick={this.countService.add}>+</button> |
| 51 | + {this.countService.count} |
| 52 | + <button onClick={this.countService.remove}>-</button> |
| 53 | + </div> |
| 54 | + ) |
| 55 | + } |
| 56 | +} |
| 57 | + |
| 58 | +// 组件 |
| 59 | +@Component({ providers: [CountService] }) // 声明自己的服务 |
| 60 | +class Home extends VueComponent { |
| 61 | + // 构造函数注入服务，无需new |
| 62 | + constructor(private countService: CountService) { |
| 63 | + super() |
| 64 | + watch( |
| 65 | + () => countService.count, |
| 66 | + () => console.log('数据变化哦'), |
| 67 | + ) |
| 68 | + } |
| 69 | + |
| 70 | + // 组件自身的状态 |
| 71 | + @Ref() count = 1 |
| 72 | + |
| 73 | + // 计算属性 |
| 74 | + @Computed() |
| 75 | + get plusResult() { |
| 76 | + return this.count + this.countService.count |
| 77 | + } |
| 78 | + |
| 79 | + // 声明周期 |
| 80 | + @Hook('Mounted') |
| 81 | + mounted() { |
| 82 | + console.log('mounted', this.child?.props.size) |
| 83 | + } |
| 84 | + |
| 85 | + // 子组件引用 链接🔗 |
| 86 | + @Link() child?: HomeChild |
| 87 | + |
| 88 | + @Autobind() |
| 89 | + add() { |
| 90 | + this.count++ |
| 91 | + } |
| 92 | + |
| 93 | + @Autobind() |
| 94 | + remove() { |
| 95 | + this.count-- |
| 96 | + } |
| 97 | + |
| 98 | + render() { |
| 99 | + return ( |
| 100 | + <div style={{ textAlign: 'center' }}> |
| 101 | + <h2>外部服务</h2> |
| 102 | + <button onClick={this.countService.add}>+</button> |
| 103 | + {this.countService.count} |
| 104 | + <button onClick={this.countService.remove}>-</button> |
| 105 | + |
| 106 | + <h2>组件自身状态</h2> |
| 107 | + <button onClick={this.add}>+</button> |
| 108 | + {this.count} |
| 109 | + <button onClick={this.remove}>-</button> |
| 110 | + |
| 111 | + <HomeChild ref="child" size={'small'}></HomeChild> |
| 112 | + </div> |
| 113 | + ) |
| 114 | + } |
| 115 | +} |
| 116 | + |
| 117 | +const app = createApp(Home) |
8 | 118 | app.mount('#app') |
0 commit comments