修改ts配置

This commit is contained in:
编码猿
2025-09-19 02:32:15 +08:00
parent 4e06a0caed
commit 05bcc3376c
4 changed files with 49 additions and 52 deletions

View File

@@ -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 {

View File

@@ -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<HeaderProps> {
// required 的 true or false 需要和 类型中 text的? 对应
static defaultProps: ComponentProps<HeaderProps> = {
text: {default: '默认数值', required: true},
list: {default: () => []}
text: { default: '默认数值', required: true },
list: { default: () => [] }
};
@Hook('Mounted')
@@ -32,16 +32,15 @@ export default class Header extends VueComponent<HeaderProps> {
console.log('Header 组件的 mounted 生命周期...')
}
render() {
const {text, list} = useProps<HeaderProps>();
const { text, list } = useProps<HeaderProps>();
return (
<div class="header">
<p>{text}</p>
{this.context.slots.default?.()}
{this.context.slots.haveName?.()}
<p>{ text }</p>
{ this.context.slots.default?.() }
{ this.context.slots.haveName?.() }
<ul>
{
list.map(

View File

@@ -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 (
<div class="home" ref="H1">
<h1></h1>
<p onClick={ this.addCount }>count响应式变量{ this.count }</p>
<Header
v-slots={ {
default: () => <div class="default"> default </div>,
haveName: () => <div class="haveName"> </div>,
item: (val) => <li key={ val.id }>{ val.title }</li>
} }
list={ this.newList }
text={ this.text }>
render() {
return (
<div class="home" ref="H1">
<h1></h1>
<p onClick={this.addCount}>count响应式变量{this.count}</p>
<Header
v-slots={{
default: () => <div class="default"> default </div>,
haveName: () => <div class="haveName"> </div>,
item: (val) => <li key={val.id}>{val.title}</li>
}}
list={this.newList}
text={this.text}>
</Header>
</div>
)
}
</Header>
</div>
)
}
}

View File

@@ -16,8 +16,7 @@
"lib": [
"ES2020",
"dom",
"dom.iterable",
"scripthost"
"dom.iterable"
],
"skipLibCheck": true,
"paths": {