vue2.6.0以上版本 jsx/tsx slot插槽

1. 组件采用tsx 语法，需要使用到插槽。
   简单封装一个button组件，举个例子。

Button/index.tsx

import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
export default class Button extends Vue {
    protected render() {
       return (<div>
            {/*默认插槽*/}
            {this.scodedSlots.default && this.scodedSlots.default({param1,param2})}
            {!this.scodedSlots.default && <div>一个按钮</div>}
            {/*具名插槽*/}
            {this.scodedSlots.name1 && this.scodedSlots.name1({param1,param2})}
            {!this.scodedSlots.name1 && <div>一个name1插槽</div>}
        </div>);
  }
}

调用组件

demo.tsx

import { Component, Vue, Prop } from 'vue-property-decorator';
import Button from './Button';
@Component
export default class Demo extends Vue {
    protected render() {
       return (<div>
          <Button scopedSlots={{
            name1=({param1,param2}: any)=>{
            return <div>{param1}{param2}</div>}
        }}>点击</Buttton>
        </div>);
  }
}