Closed
Description
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
Labels
No labels