- 组件采用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. $scopedSlots.default && this.scodedSlots.default({param1,param2})}
{!this.$scopedSlots.default && <div>一个按钮</div>}
{/*具名插槽*/}
{this.$scopedSlots.name1 && this.scodedSlots.name1({param1,param2})}
{!this.$scopedSlots.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>);
}
}
