setup 能够支持返回模板数据&渲染函数
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 }, '按钮')
}
}
}
}
// 使用组件
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(){} } }
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.