【无标题】

最新推荐文章于 2024-01-18 23:25:36 发布

理个以哈哟

最新推荐文章于 2024-01-18 23:25:36 发布

阅读量72

点赞数

分类专栏： web前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zynCSDN/article/details/126588542

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

// 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');
	}
}