vue render

内容来自于vue官方文档

/**
 * @returns {VNode}
 */
createElement(
	// {String | Object | Function}
	// 一个 HTML 标签名、组件选项对象,或者
	// resolve 了上述任何一种的一个 async 函数。必填项。
	'div',// {Object}
	// 一个与模板中属性对应的数据对象。可选。
	{
		// 与 `v-bind:class` 的 API 相同,
		// 接受一个字符串、对象或字符串和对象组成的数组
		'class': {
			foo: true,bar: false
		},// 与 `v-bind:style` 的 API 相同,
		// 接受一个字符串、对象,或对象组成的数组
		style: {
			color: 'red',fontSize: '14px'
		},// 普通的 HTML 特性
		attrs: {
			id: 'foo'
		},// 组件 prop
		props: {
			myProp: 'bar'
		},// DOM 属性
		domProps: {
			innerHTML: 'baz'
		},// 事件监听器在 `on` 属性内,
		// 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
		// 需要在处理函数中手动检查 keyCode。
		on: {
			click: this.clickHandler
		},// 仅用于组件,用于监听原生事件,而不是组件内部使用
		// `vm.$emit` 触发的事件。
		nativeOn: {
			click: this.nativeClickHandler
		},// 自定义指令。注意,你无法对 `binding` 中的 `oldValue`
		// 赋值,因为 Vue 已经自动为你进行了同步。
		directives: [{
			name: 'my-custom-directive',value: '2',expression: '1 + 1',arg: 'foo',modifiers: {
				bar: true
			}
		}],// 作用域插槽的格式为
		// { name: props => VNode | Array<VNode> }
		scopedSlots: {
			default: props => createElement('span',props.text)
		},// 如果组件是其它组件的子组件,需为插槽指定名称
		slot: 'name-of-slot',// 其它特殊顶层属性
		key: 'myKey',ref: 'myRef',// 如果你在渲染函数中给多个元素都应用了相同的 ref 名,
		// 那么 `$refs.myRef` 会变成一个数组。
		refInFor: true
	},// {String | Array}
	// 子级虚拟节点 (VNodes),由 `createElement()` 构建而成,
	// 也可以使用字符串来生成“文本虚拟节点”。可选。
	[
		'先写一些文字',createElement('h1','一则头条'),createElement(MyComponent,{
			props: {
				someProp: 'foobar'
			}
		})
	]
)

相关文章

https://segmentfault.com/a/1190000022018995 https://www....
ES6 (ECMAScript 6)中的模块是一个包含 JavaScript 代码的...
from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ V...
D:\Temp&gt;npm init vite@latest vue3study --temp...
文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组...
文章浏览阅读3.3k次,点赞3次,收藏16次。静默打印是什么?简...