修改插件的实现和文档

README.md

@@ -91,8 +91,9 @@ src/
 
 ```tsx
 // 首页 页面
-import { Autobind, Component, Link, Mut, VueComponent } from 'vue3-oop'
-import Header from '@/components/Header'
+import { Component, Ref, Setup, Vue } from 'vue-facing-decorator'
+import Header from '../components/Header'
+import { RouteLocationNormalizedLoaded, Router, useRoute, useRouter } from "vue-router";
 
 interface ListItemType {
     id: number
@@ -100,44 +101,52 @@ interface ListItemType {
 }
 
 @Component()
-export default class Home extends VueComponent {
+export default class Home extends Vue {
 
-    @Mut()
-    count: number = 1
+    counter: number = 1;
 
-    @Mut()
-    text: string = "Home props 传给 Header 的字符串"
+    @Ref
+    readonly refH1!: HTMLDivElement
+
+    @Setup((props, ctx) => useRouter())
+    router!: Router
+
+    @Setup((props, ctx) => useRoute())
+    route!: RouteLocationNormalizedLoaded
 
-    @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)
+    addCount() {
+        // console.log("ref dom: ", this.refH1)
+        // this.router.push({ name: 'about' })
+        // this.route.query
+        this.counter++
     }
 
+    testHtml() {
+        return <p>测试html jsx 函数</p>
+    }
+
+
     render() {
         return (
-            <div class="home" ref="H1">
-                <h1>首页</h1>
-                <p onClick={ this.addCount }>count响应式变量（点我）：{ this.count }</p>
+            <div class="home">
+                <h1 ref="refH1">首页</h1>
+                <p onClick={ this.addCount }>counter 响应式变量（点我）：{ this.counter }</p>
                 <Header
-                    v-slots={ {
+                    list={ this.newList }
+                    text={ "测试" }>
+                    { {
                         default: () => <div class="default">父到子 default 插槽</div>,
                         haveName: () => <div class="haveName">父到子 具名 插槽</div>,
-                        item: (val) => <li key={ val.id }>{ val.title }</li>
+                        item: (val: ListItemType) => <li key={ val.id }>{ val.title }</li>
                     } }
-                    list={ this.newList }
-                    text={ this.text }>
                 </Header>
+                { this.testHtml }
             </div>
         )
     }
@@ -146,53 +155,43 @@ export default class Home extends VueComponent {
 
 ```tsx
 // 头部组件
-import { Component, ComponentProps, Hook, useProps, VueComponent } from 'vue3-oop'
-import { JSX } from "vue/jsx-runtime";
-import { VNodeChild } from "vue";
+import { Component, Prop, TSX, Vue } from 'vue-facing-decorator'
+
+interface Props {
+    text?: string
+    list?: ListItemType[]
+}
 
 interface ListItemType {
     id: number
     title: string
 }
 
-interface HeaderProps {
-    text?: string;
-    list: ListItemType[]
-    slots: {
-        default: () => JSX.Element;
-        haveName: () => JSX.Element;
-        item: (val: ListItemType) => VNodeChild;
-    }
-}
-
 @Component()
-export default class Header extends VueComponent<HeaderProps> {
+export default class Header extends TSX<Props>()(Vue) implements Props {
 
-    // required 的 true or false 需要和 类型中 text的? 对应
-    static defaultProps: ComponentProps<HeaderProps> = {
-        text: { default: '默认数值', required: true },
-        list: { default: () => [] }
-    };
+    @Prop({ default: '默认数值' })
+    text!: string;
 
-    @Hook('Mounted')
-    mounted() {
-        console.log("this: ", this);
-        console.log('Header 组件的 mounted 生命周期...')
+    @Prop()
+    list!: ListItemType[];
+
+    created() {
+        console.log("created: ", this)
     }
 
     render() {
-        const { text, list } = useProps<HeaderProps>();
         return (
             <div class="header">
                 头部组件
-                <p>{ text }</p>
-                { this.context.slots.default?.() }
-                { this.context.slots.haveName?.() }
+                <p>{ this.text }</p>
+                { this.$slots.default?.() }
+                { this.$slots.haveName?.() }
                 <ul>
                     {
-                        list.map(
+                        this.list.map(
                             item =>
-                                this.context.slots.item?.(item)
+                                this.$slots.item?.(item)
                         )
                     }
                 </ul>