51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { Autobind, Component, Link, Mut, VueComponent } from 'vue3-oop'
|
||
import Header from '@/components/Header'
|
||
|
||
interface ListItemType {
|
||
id: number
|
||
title: string
|
||
}
|
||
|
||
@Component()
|
||
export default class Home extends VueComponent {
|
||
|
||
@Mut()
|
||
count: number = 1
|
||
|
||
@Mut()
|
||
text: string = "Home props 传给 Header 的字符串"
|
||
|
||
@Mut()
|
||
newList: ListItemType[] = [
|
||
{ id: 1, title: '新闻1' },
|
||
{ id: 2, title: '新闻2' },
|
||
{ id: 3, title: '新闻3' },
|
||
]
|
||
|
||
@Link() H1?: HTMLDivElement
|
||
|
||
@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 }>
|
||
</Header>
|
||
</div>
|
||
)
|
||
}
|
||
} |