vue 中的 render 函数作用详解

'div',
// 2. 1中渲染的标签的属性，详情查看文档：第二个参数【可选】
{
style: {
color: '#333',
border: '1px solid #ccc'
}
},
// 3. 1中渲染的标签的子元素数组：第三个参数【可选】
[
'text', // 文本节点直接写就可以
_this.$slots.default, // 所有不具名插槽，是个数组
createElement('div', _header) // createElement()创建的VNodes
] )
}

可以看下控制台中打印出来的 $slots

下面在通过具体代码看下render函数怎么用

　　例：           

    render:(h) => {
              return h('div',{
　　　　　　　　　　　　　　　　　　　//给div绑定value属性
                props: {
                  value:''
                },
　　　　　　　　　　　　　　　　　　　//给div绑定样式
　　　　　　　　　　　　　　　　　　　style:{
　　　　　　　　　　　　　　　　　　　　　　width:'30px'
　　　　　　　　　　　　　　　　　　　},　
　　　　　　　　　　　　　　　　　　　//给div绑定点击事件　　
                on: {
                  click: () => {
                    console.log('点击事件')
                  }
                },
              })
            }  

深入 data 对象

　　有一件事要注意：正如在模板语法中，v-bind:class 和 v-bind:style ，会被特别对待一样，在 VNode 数据对象中，下列属性名是级别最高的字段。该对象也允许你绑定普通的 HTML 特性，就像 DOM 属性一样，比如 innerHTML (这会取代 v-html 指令)。

{
 // 和`v-bind:class`一样的 API
 'class': {
 foo: true,
 bar: false
 },
 // 和`v-bind:style`一样的 API
 style: {
 color: 'red',
 fontSize: '14px'
 },
 // 正常的 HTML 特性
 attrs: {
 id: 'foo'
 },
 // 组件 props
 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 已经自动为你进行了同步。								 
 2/3   首页 上一页 1 2 3 下一页 尾页