// Vue2、Vue3 中render函数差异化
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-change.md#context-free-vnodes
一、基础配置
V2 选项式
h函数通过render参数进行传递。
export defalut{
methods: {
clickHandler(){}
},
render(h) {
return h(tag,
{
// 属性相关的配置
class:{},
style: {},
attr: {},
props: {},
domProps: {
innerHTML: 'init Value'
},
key: '',
// 事件相关配置
on: {
click: this.clickHandler,
},
},
[
this.$slots.default // 设置插槽
]
)
}
}
// 导致V2结构的原因是 Vnode extend Snabbdom
V3 组合式API
通过全局导入
import { h } from 'vue'
export defalut {
methods: {
clickHandler() {}
},
render() {
return h(tag,
{
class: ['button', { 'is-outlined': isOutlined }] || {},
style: [{ color: '#34495E' }, { backgroundColor: buttonColor }],
id: 'submit',
innerHTML: '',
onClick: this.clickHandler,
key: 'submit-button'
},
[
]
)
}
}
二、render中引入组件
V2
// component is: button-counter
export defalut {
render(h) {
return h('button-counter');
}
}
V3
import { h, resolveComponent } from 'vue'
export defalut {
render() {
const ButtonCounter = resolveComponent('button-counter')
return h('ButtonCounter');
}
}
【无标题】
最新推荐文章于 2024-10-18 15:58:53 发布