修改ts配置
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -16,8 +16,7 @@
|
||||
"lib": [
|
||||
"ES2020",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
"dom.iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
"paths": {
|
||||
|
||||
Reference in New Issue
Block a user