feat: 函数式组件 插槽

Author: ZhengXiaowei

src/components/Button/Button.tsx

@@ -36,9 +36,11 @@ export default class ZButton extends tsc.Component<ButtonProps> {
   }
 
   @api(demoApi)
-  protected getResult(res?: string) {
+  protected getResult() {
     // 获取api调用结果
-    console.log(res);
+    return (res?: string) => {
+      console.log(res);
+    };
   }
 
   protected render() {
@@ -49,6 +51,8 @@ export default class ZButton extends tsc.Component<ButtonProps> {
     return (
       <div>
         <p class={className}>user: {this.user.name}</p>
+        {this.$slots.default || "组件默认slot内容"}
+        {this.$slots.com_name_slot || "组件中的具名slot"}
         <van-button type={this.type} onClick={() => this.getResult()}>
           {this.text || "我是按钮"}
         </van-button>

src/decorator/index.ts

@@ -2,7 +2,7 @@
  * @Author: ZhengXiaowei
  * @Date: 2020-02-25 17:34:04
  * @LastEditors: ZhengXiaowei
- * @LastEditTime: 2020-02-25 19:37:38
+ * @LastEditTime: 2020-03-05 09:42:51
  * @Description: 自定义装饰器方法
  * @FilePath: /src/decorator/index.ts
  */
@@ -19,9 +19,9 @@ export const api = (promise: Function) => {
     descriptor.value = async function() {
       try {
         let result = await promise();
-        oldValue.call(this, result);
+        oldValue.call(this, ...arguments)(result);
       } catch (e) {
-        oldValue.call(this, {}, e);
+        oldValue.call(this, ...arguments)({}, e);
       }
     };
   };

src/fun-components/fun-layout.tsx

@@ -0,0 +1,20 @@
+import * as tsx from "vue-tsx-support";
+
+interface Props {
+  msg?: string;
+  name?: string;
+}
+
+export default tsx.componentFactory.create<Props, {}>({
+  name: "FunLayout",
+  functional: true,
+  render(h, ctx) {
+    return (
+      <div>
+        {ctx.props.msg} - {ctx.props.name}
+        {ctx.slots().default}
+        {ctx.slots().name_slot || "默认的具名slot内容"}
+      </div>
+    );
+  }
+});

src/views/Home.tsx

@@ -2,10 +2,25 @@ import { Component, Vue } from "vue-property-decorator";
 import { Component as tsc } from "vue-tsx-support";
 
 import ZButton, { BType } from "@/components/Button/Button";
+import FunLayout from "@/fun-components/fun-layout";
 
 @Component
 export default class HomeContainer extends tsc<Vue> {
   protected render() {
-    return <ZButton type={BType.primary}></ZButton>;
+    return (
+      <div>
+        <ZButton type={BType.primary}>
+          <p>替换组件默认slot</p>
+          <p>替换组件默认slot</p>
+          <p>替换组件默认slot</p>
+          <p>替换组件默认slot</p>
+          <p slot="com_name_slot">替换组件的具名slot</p>
+        </ZButton>
+        <FunLayout msg="内容" name="张三">
+          <p>默认的slot</p>
+          <p slot="name_slot">具名slot</p>
+        </FunLayout>
+      </div>
+    );
   }
 }