65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import { defineComponent, reactive, onMounted } from 'vue'
|
||
import Header from '@/components/Header'
|
||
import { HttpConfig } from '@shared/config/index'
|
||
import { UrlCheckUtils } from '@shared/utils'
|
||
import { useCounterStore } from '@/stores/counter'
|
||
import { storeToRefs } from 'pinia'
|
||
|
||
interface stateType {
|
||
list: ListItemType[]
|
||
}
|
||
|
||
interface ListItemType {
|
||
id: number
|
||
title: string
|
||
}
|
||
|
||
export default defineComponent({
|
||
name: "Home",
|
||
setup() {
|
||
|
||
const counterStore = useCounterStore()
|
||
const { increment } = counterStore
|
||
const { count, doubleCount } = storeToRefs(counterStore)
|
||
|
||
const state = reactive<stateType>({
|
||
list: [
|
||
{ id: 1, title: '新闻1' },
|
||
{ id: 2, title: '新闻2' },
|
||
{ id: 3, title: '新闻3' },
|
||
]
|
||
})
|
||
|
||
|
||
|
||
onMounted(() => {
|
||
// console.log("onMounted: ", HttpConfig.DevBaseUrl);
|
||
console.log("check: ", UrlCheckUtils.check())
|
||
})
|
||
|
||
// 定义处理子组件事件的函数
|
||
const handleChildEvent = (message: string) => {
|
||
console.log('收到子组件事件：', message)
|
||
}
|
||
|
||
|
||
return () => (
|
||
<div class="home">
|
||
<Header
|
||
text={state.list}
|
||
onClick={() => {
|
||
console.log("通过props自定义事件传给子组件");
|
||
}}
|
||
onSendMessage={handleChildEvent}>
|
||
{{
|
||
scoped: (item: ListItemType) => <li key={item.id}>{item.title}</li>,
|
||
header: () => <div class="header">父到子 具名 插槽</div>,
|
||
default: () => <div class="default">父到子 default 插槽</div>
|
||
}}
|
||
</Header>
|
||
<h1>首页</h1>
|
||
<div class="count" onClick={increment}>点我+1：{count.value}</div>
|
||
</div>
|
||
)
|
||
}
|
||
}) |