修改文件结构
This commit is contained in:
60
front-end/main-app/src/app/views/Home.tsx
Normal file
60
front-end/main-app/src/app/views/Home.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
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} 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>
|
||||
)
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user