vue的jsx使用插槽

参考

jsx文件：

export default {
    props:{
        initData: {
            type: Object,
            default: ()=>{
                return {}
            }
        },
        config:  {
            type: Object,
            default: ()=>{
                return {}
            }
        }
    },
    render(h){
        let tagName = this.config&&this.config.type ? this.config.type: 'div'
        return <div class="chart-box">
                    {/* <p class="chart-title">{this.config.title}</p> */}
                    <header>{this.$slots.default}</header>
                    <div class='chart-main'>
                        <tagName initData={this.initData} config={this.config} />
                    </div>
               </div>
    }
}
复制代码

xx.vue文件使用jsx

可以直接像组件那样引入使用

<Comp>
    <p>插槽内容</p>
</Comp>

import Comp from 'xxx.js'
componnets: {
Comp
}


//全局使用
main.js:
import Comp from 'xxx.js'
Vue.component('Comp',Comp)
复制代码