feat: 增加simple-props组件定义

Author: agileago

example/main.tsx

@@ -1,68 +1,18 @@
 import '@abraham/reflection'
 import 'ant-design-vue/dist/reset.css'
-import {
-  Component,
-  type ComponentProps,
-  Hook,
-  injectService,
-  Link,
-  mergeRefs,
-  Mut,
-  provideService,
-  VueComponent,
-} from 'vue3-oop'
-import { createApp, defineComponent, ref, shallowRef } from 'vue'
+import { Component, Hook, Link, mergeRefs, Mut, VueComponent } from 'vue3-oop'
+import { createApp, shallowRef } from 'vue'
 import { ConfigProvider, Layout, Menu } from 'ant-design-vue'
 import { RouterLink, RouterView } from 'vue-router'
 import { RouterStartService } from './router'
 import { routes } from './router/routes'
 import zhCN from 'ant-design-vue/lib/locale/zh_CN'
 import { setup } from './setup'
 
-class AService {
-  height = ref(0)
-}
-
-const A1 = defineComponent(() => {
-  provideService(new AService())
-  return () => (
-    <div>
-      <A2></A2>
-    </div>
-  )
-})
-
-const A2 = defineComponent(() => {
-  const a = injectService(AService)
-  console.log(11111, a)
-  return () => <div>111 {a.height.value}</div>
-})
-
-interface ChildProps {
-  value?: string
-  'onUpdate:value'?: (val: string) => any
-}
-
-class Child extends VueComponent<ChildProps> {
-  static defaultProps: ComponentProps<ChildProps> = ['value', 'onUpdate:value']
-  @Hook('Mounted')
-  mounted() {
-    console.log('child mounted')
-  }
-  render() {
-    console.log('child render')
-    return <div>child</div>
-  }
-}
-
 @Component({
   providers: [RouterStartService],
 })
 class App extends VueComponent {
-  constructor(private a: RouterStartService) {
-    super()
-  }
-
   @Mut() collapsed = false
 
   cc = shallowRef()
@@ -93,11 +43,6 @@ class App extends VueComponent {
             >
               VUE 示例
             </h2>
-            <Child
-              ref={(value, refs) => {
-                console.log(value, refs)
-              }}
-            ></Child>
             <Menu theme={'dark'} mode={'inline'}>
               {routes.map((r) => {
                 return (
@@ -122,7 +67,6 @@ class App extends VueComponent {
           </Layout.Sider>
           <Layout.Content>
             <RouterView></RouterView>
-            <A1></A1>
           </Layout.Content>
         </Layout>
       </ConfigProvider>

example/module/basic/basic.module.tsx

@@ -14,7 +14,7 @@ export default class BasicModule extends VueComponent {
         {({ Component }: { Component: any }) => {
           return (
             <div>
-              <h2>111</h2>
+              <h2>Suspense容器</h2>
               <Suspense
                 v-slots={{
                   default: () => [Component],

example/module/basic/basic.router.ts

@@ -4,21 +4,21 @@ const routes: RouteRecordRaw = {
   path: '/basic',
   component: () => import('./basic.module'),
   meta: {
-    title: '基础功能',
+    title: '特色功能',
   },
   children: [
     {
-      path: '/basic/hello-world',
-      component: () => import('./hello-world/hello-world.view'),
+      path: '/basic/simple-component',
+      component: () => import('./simple-component/index.view'),
       meta: {
-        title: '加减',
+        title: '简单组件',
       },
     },
     {
-      path: '/basic/user-input',
+      path: '/basic/class-component',
       component: () => import('./user-input/user-input.view'),
       meta: {
-        title: '增删改查',
+        title: '类组件',
       },
     },
     {
@@ -28,6 +28,20 @@ const routes: RouteRecordRaw = {
         title: '高阶组件',
       },
     },
+    {
+      path: '/basic/service',
+      component: () => import('./hoc/hoc.view'),
+      meta: {
+        title: '简单服务',
+      },
+    },
+    {
+      path: '/basic/inject',
+      component: () => import('./hoc/hoc.view'),
+      meta: {
+        title: '复杂服务注入',
+      },
+    },
   ],
 }
 

example/module/basic/simple-component/index.view.tsx

@@ -0,0 +1,69 @@
+import { defineComponent, useClassAndStyle } from 'vue3-oop'
+import { AllowedComponentProps } from '@/type'
+import { ref } from 'vue'
+
+// region 函数组件
+export interface SimpleFuncComponentProps extends AllowedComponentProps {
+  count?: number
+}
+export function SimpleFuncComponent(props: SimpleFuncComponentProps) {
+  return <div>函数组件：{props.count}</div>
+}
+// endregion
+
+// region 状态带属性组件
+export interface SimpleStateComponentProps {
+  initialValue?: number
+}
+
+export const SimpleStateComponent = defineComponent(
+  function SimpleStateComponent(props: SimpleStateComponentProps) {
+    const classAndStyle = useClassAndStyle()
+    const count = ref(props.initialValue || 0)
+    return () => (
+      <div {...classAndStyle}>
+        <input type={'number'} v-model={count.value} />
+      </div>
+    )
+  },
+)
+
+export const SimpleStateWithDefaultValueComponent = defineComponent(
+  function SimpleStateWithDefaultValueComponent(
+    props: SimpleStateComponentProps,
+  ) {
+    const classAndStyle = useClassAndStyle()
+    const count = ref(props.initialValue || 0)
+    return () => (
+      <div {...classAndStyle}>
+        <h3>带默认属性参数的组件</h3>
+        <input type={'number'} v-model={count.value} />
+      </div>
+    )
+  },
+  {
+    props: {
+      initialValue: {
+        type: Number,
+        default: 20,
+      },
+    },
+  },
+)
+
+// endregion
+
+// 简单状态组件定义
+const SimpleComponent = defineComponent(() => {
+  return () => (
+    <div>
+      <h2>简单组件定义</h2>
+      <h3>函数组件</h3>
+      <SimpleFuncComponent count={20}></SimpleFuncComponent>
+      <SimpleStateComponent initialValue={10}></SimpleStateComponent>
+      <SimpleStateWithDefaultValueComponent></SimpleStateWithDefaultValueComponent>
+    </div>
+  )
+})
+
+export default SimpleComponent

package.json

@@ -81,7 +81,7 @@
     "vite-tsconfig-paths": "^4.2.0",
     "vitepress": "1.0.0-rc.10",
     "vitest": "^0.34.3",
-    "vue": "^3.3.4",
+    "vue": "^3.5.13",
     "vue-router": "^4.2.4"
   },
   "commitlint": {