在vue3.0的JSX语法下使用插槽
由于在vue2中JSX的语法在渲染和代码简洁度上有优化,偶尔也会用JSX的形式封装组件;新的项目里开始用vue3发现,以前丢插槽的两种方式行不通了,得想想办法才行。// vue2 插槽写法render (h) {const {$scopedSlots } = this// 第一种const {title = () => h('p' , { style : 'margin-top: 0' }
·
由于在vue2中JSX的语法在渲染和代码简洁度上有优化,偶尔也会用JSX的形式封装组件;新的项目里开始用vue3发现,以前丢插槽的两种方式行不通了,得想想办法才行。
// vue2 插槽写法
render (h) {
const { $scopedSlots } = this
// 第一种
const {
title = () => h('p' , { style : 'margin-top: 0' } , this.title) ,
} = $scopedSlots
return h('el-popover' , {
class : 'md-button' ,
ref : 'popover' ,
props : { placement } ,
} , [title(this)])
// 第二种
return h('el-popover' , {
class : 'md-button' ,
ref : 'popover' ,
props : { placement } ,
} , [
// reference 插槽
h('el-button' , {
props : $props ,
slot : 'reference' ,
} , ($scopedSlots.default || ((O_o) => '^_^'))(this)) ,
])
}
最后在element-plus发现到了一种方式,定义好键名相同的插槽和内容后,利用v-slots丢进去就没问题了
const slots = {
default : this.$slots.default ,
// ↓键名必须要和插槽名相同
footer : () => {
return <span class="dialog-footer"></span>
}
}
const dialog = () => {
return <el-dialog v-model={this.visible} v-slots={ slots }/>
}
return dialog()
更多推荐
已为社区贡献1条内容
所有评论(0)