渲染函数&JSX个人理解

### [官网文档](https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5-data-%E5%AF%B9%E8%B1%A1)
- 
<font size=5 color="#foo">render函数</font>
```
render(createElement) { // @returns {VNode} 返回虚拟Dom节点 
    return createElement( 
    // 第一个参数，组件选项对象 
    // {String | Object | Function} 
    // 一个 HTML 标签字符串，组件选项对象，或者 
    // 解析上述任何一种的一个 async 异步函数。**必需参数**。 
    { 
        "div" || 组件 || 一个函数返回前面两种数据 
    }, 
    
    // 第二个参数，数据选项对象 
    // {Object} 
    // 一个包含模板相关属性的数据对象 
    // 你可以在 template 中使用这些特性。**可选参数**。 { 
    // 和`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 已经自动为你进行了同步。 
    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(), 多个子元素 => [ createElement(), createElement() ] || 调用一个func()返回 ) 
} 
```

eg: 
```
export default { 
    name: 'Demo', 
    props: { 
        menuData: { 
        type: Array, 
            required: true, 
        } 
    }, 
    data() {
    }, 
    methods: {
        render(createElement) { 
            createElement( 
            "div", 
            { 
                props: { 
                    //theme参数是给上面的div元素传入的自定义属性 
                    //获取 props用 this.$props 
                    theme: this.$props.theme, 
                    openKeys: this.openKeys, 
                }, 
                on: { 
                    openChange: this.onOpenChange, 
                    select: (obj) => { 
                        this.selectedKeys = obj.selectedKeys this.$emit('select', obj) 
                    } 
                } 
            }, 
            "你好" 
            ) 
        } 
    } 
} 
```

Leanote's Blog

Navigation

Recent Posts

Friend Links