vue 非template模式_vue渲染方式render和template的区别

render函数详解

Vue中的Render函数中有一个参数，这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。Render函数将createElement的返回值放到了HTML中

createElement这个函数中有3个参数

第一个参数(必要参数)：主要用于提供DOM的html内容，类型可以是字符串、对象或函数

第二个参数(类型是对象，可选)：用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类

第三个参数(类型是数组，数组元素类型是VNode，可选)：主要是指该结点下还有其他结点，用于设置分发的内容，包括新增的其他组件。注意，组件树中的所有VNode必须是唯一的

// @return {VNode}

createElement(

// {String | Object | Function}

// 一个HTML标签字符串，组件选项对象，或者一个返回值类型为String/Object的函数。该参数是必须的

'div',

// {Object}

// 一个包含模板相关属性的数据对象，这样我们可以在template中使用这些属性，该参数是可选的。

{

attrs: {

name: headingId,

href: '#'+headingId

},

style: {

color: 'red',

fontSize: '20px'

},

'class': {

foo: true,

bar: false

},

// DOM属性

domProps: {

innerHTML: 'baz'

},

// 组件props

props: {

myProp: 'bar'

},

// 事件监听基于 'on'

// 所以不再支持如 'v-on:keyup.enter' 修饰语

// 需要手动匹配 KeyCode

on: {

click: function(event) {

event.preventDefault();

console.log(111);

}

}

}

// {String | Array}

// 子节点(VNodes)由 createElement() 构建而成。可选参数

// 或简单的使用字符串来生成的 "文本节点"。

[

'xxxx',

createElement('h1', '一则头条'),

createElement(MyComponent, {

props: {

someProp: 'xxx'

}

}),

this.$slots.default

]

)

什么时候用render函数？

假设我们要封装一套按钮组件，按钮有四个样式(success、error、warning、default)。首先，你可能会想到如下实现

{{ text }}