vue-render函数的三个参数

 第一个参数(必须) - {String | Object | Function}

Vue.component('elem', {
       render: function(createElement) {
                return createElement('div');//一个HTML标签字符
                /*return createElement({
                    template: '
'//组件选项对象
                });*/
                /*var func = function() {
                    return {template: '
'}
                };
                return createElement(func());//一个返回HTML标签字符或组件选项对象的函数*/
            }
        });

第二个参数(可选) - {Object}

Vue.component('elem', {
            render: function(createElement) {
                var self = this;
                return createElement('div', {//一个包含模板相关属性的数据对象
                    'class': {
                        foo: true,
                        bar: false
                    },
                    style: {
                        color: 'red',
                        fontSize: '14px'
                    },
                    attrs: {
                        id: 'foo'
                    },
                    domProps: {
                        innerHTML: 'baz'
                    }
                });
            }
        });

第三个参数(可选) - {String | Array}

Vue.component('elem', {
            render: function(createElement) {
                var self = this;
                // return createElement('div', '文本');//使用字符串生成文本节点
                return createElement('div', {},[//由createElement函数构建而成的数组
                    createElement('h1', '主标'),//createElement函数返回VNode对象
                    createElement('h2', '副标')
                ]);
            }
        });

与template写法对比

this.$slots用法

    
    
    


    

        
            
About Me
            
Here's some page content
            
Copyright 2016 Evan You
            
If I have some content down here
        
    
    

使用props传递数据

v-model指令

    
    
    


    

        
        
你的名字是{{name}}
    
    

作用域插槽

向子组件中传递作用域插槽

函数化组件

    
    
    


    

        
        切换为图片为组件
        切换为视频为组件
        切换为文本组件
    
    

渲染动态表单用法

在示例代码中，我们定义了一个表单组件，其中的 `fields` 数组包含了表单中的各个字段，每个字段都有一个 `type` 属性表示字段的类型，例如文本框、密码框、下拉框等。在 `render` 函数中，我们使用 `map` 方法遍历 `fields` 数组，根据每个字段的类型动态生成对应的组件，并将组件的属性和事件绑定到表单数据中。最后，我们将所有生成的组件包裹在一个 `div` 元素中返回。

需要注意的是，由于在 `render` 函数中动态生成了组件，因此在模板中无法直接使用这些组件。如果需要在模板中使用这些组件，可以通过在 `render` 函数中将生成的组件保存到一个数组中，然后在模板中使用 `v-for` 渲染这个数组。

希望这个示例能帮助您理解如何使用 Vue 的 render 函数渲染动态表单。如有任何问题，请随时提问。