Subscribe on changes!

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

avatar
Apr 1st 2021

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(){} } }

avatar
Apr 1st 2021

Please check the RFC about expose https://github.com/vuejs/rfcs/pull/210. Also, you can ask questions on the forum, the Discord server or StackOverflow first.