Skip to content

setup 能够支持返回模板数据&渲染函数 #3521

Closed
@chen-designs

Description

@chen-designs

What problem does this feature solve?

开发组件库时组件内部处理逻辑对外暴露容易对使用者带来困扰,希望能提供类似组件内部私有数据和方法如下:

export default Btn {
name: 'Bth',

setup(props){
    // 内部数据 & 方法, 不对外部访问
    const bth = ref(null)
    const handlerClick = e => {
        // 在出发点击事件前做点什么
        props.onClick(e)
    }

    // 公共数据 & 方法对外部公开
    const click = () => btn.value.click()
    const focus = () => btn.value.focus()

    return {
        // 对外部公开的数据 & 方法
        click: click,
        focus: focus,

        // 组件渲染函数
        render:function(){
            return h('button', { ref: btn, onClick: handlerClick }, '按钮')
        } 
    }
}

}

// 使用组件



// 调用组件方法
this.$refs.btn.click()

What does the proposed API look like?

before:
setup() {
// return { name:'CY' }
// OR
return function render(){}
}

after:
setup() {
// return { name:'CY' }
// OR
// return function render(){}
// OR
return {
// 模板数据
name:'CY',
// 渲染函数
render:function(){}
}
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions