vue-render函数的三个参数

于 2023-11-04 17:28:00 发布
阅读量835 收藏
点赞数
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanby921005/article/details/134220523
版权

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

Vue.component('elem', {
       render: function(createElement) {
                return createElement('div');//一个HTML标签字符
                /*return createElement({
                    template: '<div></div>'//组件选项对象
                });*/
                /*var func = function() {
                    return {template: '<div></div>'}
                };
                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写法对比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>render</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
    <div id="app">
        <ele></ele>
    </div>
    <script>
        /*Vue.component('ele', {
            template: '<div id="elem" :class="{show: show}" @click="handleClick">文本</div>',
            data: function() {
                return {
                    show: true
                }
            },
            methods: {
                handleClick: function() {
                    console.log('clicked!');
                }
            }
        });*/
        Vue.component('ele', {
            render: function(createElement) {
                return createElement('div', {
                    'class': {
                        show: this.show
                    },
                    attrs: {
                        id: 'elem'
                    },
                    on: {
                        click: this.handleClick
                    }
                }, '文本');
            },
            data: function() {
                return {
                    show: true
                }
            },
            methods: {
                handleClick: function() {
                    console.log('clicked!');
                }
            }
        });
        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

this.$slots用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>render</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
    <div id="app">
        <blog-post>
            <h1 slot="header"><span>About Me</span></h1>
            <p>Here's some page content</p>
            <p slot="footer">Copyright 2016 Evan You</p>
            <p>If I have some content down here</p>
        </blog-post>
    </div>
    <script>
        Vue.component('blog-post', {
            render: function(createElement) {
                var header = this.$slots.header,//返回由VNode组成的数组
                    body = this.$slots.default,
                    footer = this.$slots.footer;
                return createElement('div', [
                    createElement('header', header),
                    createElement('main', body),
                    createElement('footer', footer)
                ])
            }
        });
        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

使用props传递数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>render</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
    <div id="app">
        <ele :show="show"></ele>
        <ele :show="!show"></ele>
    </div>
    <script>
        Vue.component('ele', {
            render: function(createElement) {
                if (this.show) {
                    return createElement('p', 'true');
                } else {
                    return createElement('p', 'false');
                }
            },
            props: {
                show: {
                    type: Boolean,
                    default: false
                }
            }
        });
        new Vue({
            el: '#app',
            data: {
                show: false
            }
        });
    </script>
</body>
</html>

v-model指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>render</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
    <div id="app">
        <el-input :name="name" @input="val=>name=val"></el-input>
        <div>你的名字是{{name}}</div>
    </div>
    <script>
        Vue.component('el-input', {
            render: function(createElement) {
                var self = this;
                return createElement('input', {
                    domProps: {
                        value: self.name
                    },
                    on: {
                        input: function(event) {
                            self.$emit('input', event.target.value);
                        }
                    }
                })
            },
            props: {
                name: String
            }
        });
        new Vue({
            el: '#app',
            data: {
                name: 'hdl'
            }
        });
    </script>
</body>
</html>

作用域插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>render</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
    <div id="app">
        <ele>
            <template scope="props">
                <span>{{props.text}}</span>
            </template>
        </ele>
    </div>
    <script>
        Vue.component('ele', {
            render: function(createElement) {
                // 相当于<div><slot :text="msg"></slot></div>
                return createElement('div', [
                    this.$scopedSlots.default({
                        text: this.msg
                    })
                ]);
            },
            data: function() {
                return {
                    msg: '来自子组件'
                }
            }
        });
        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>render</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
    <div id="app">
        <ele></ele>
    </div>
    <script>
        Vue.component('ele', {
            render: function(createElement) {
                return createElement('div', [
                    createElement('child', {
                        scopedSlots: {
                            default: function(props) {
                                return [
                                    createElement('span', '来自父组件'),
                                    createElement('span', props.text)
                                ];
                            }
                        }
                    })
                ]);
            }
        });
        Vue.component('child', {
            render: function(createElement) {
                return createElement('b', this.$scopedSlots.default({text: '我是组件'}));
            }
        });
        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

函数化组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>render</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
    <div id="app">
        <smart-item :data="data"></smart-item>
        <button @click="change('img')">切换为图片为组件</button>
        <button @click="change('video')">切换为视频为组件</button>
        <button @click="change('text')">切换为文本组件</button>
    </div>
    <script>
        // 图片组件选项
        var ImgItem = {
            props: ['data'],
            render: function(createElement) {
                return createElement('div', [
                    createElement('p', '图片组件'),
                    createElement('img', {
                        attrs: {
                            src: this.data.url
                        }
                    })
                ]);
            }
        }
        // 视频组件
        var VideoItem = {
            props: ['data'],
            render: function(createElement) {
                return createElement('div', [
                    createElement('p', '视频组件'),
                    createElement('video', {
                        attrs: {
                            src: this.data.url,
                            controls: 'controls',
                            autoplay: 'autoplay'
                        }
                    })
                ]);
            }
        };
        /*纯文本组件*/
        var TextItem = {
            props: ['data'],
            render: function(createElement) {
                return createElement('div', [
                    createElement('p', '纯文本组件'),
                    createElement('p', this.data.text)
                ]);
            }
        };

        Vue.component('smart-item', {
            functional: true,
            render: function(createElement, context) {
                function getComponent() {
                    var data = context.props.data;
                    if (data.type === 'img') return ImgItem;
                    if (data.type === 'video') return VideoItem;
                    return TextItem;
                }
                return createElement(
                    getComponent(),
                    {
                        props: {
                            data: context.props.data
                        }
                    },
                    context.children
                )
            },
            props: {
                data: {
                    type: Object,
                    required: true
                }
            }
        });
        new Vue({
            el: '#app',
            data() {
                return {
                    data: {}
                }
            },
            methods: {
                change: function(type) {
                     if (type === 'img') {
                        this.data = {
                            type: 'img',
                            url: 'https://raw.githubusercontent.com/iview/iview/master/assets/logo.png'
                        }
                    } else if (type === 'video') {
                        this.data = {
                            type: 'video',
                            url: 'http://vjs.zencdn.net/v/oceans.mp4'
                        }
                    } else if (type === 'text') {
                        this.data = {
                            type: 'text',
                            content: '这是一段纯文本'
                        }
                    }
                }
            },
            created: function() {
                this.change('img');
            }
        });
    </script>
</body>
</html>

渲染动态表单用法

<template>
  <div>
    <form>
      <div v-for="(field, index) in fields" :key="index">
        <component :is="field.type" :name="field.name" :label="field.label" :options="field.options" v-model="form[field.name]" />
      </div>
    </form>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  data() {
    return {
      form: {},
      fields: [
        { type: 'text', name: 'username', label: '用户名' },
        { type: 'password', name: 'password', label: '密码' },
        { type: 'select', name: 'gender', label: '性别', options: [{ value: 'male', label: '男' }, { value: 'female', label: '女' }] },
        { type: 'checkbox', name: 'hobbies', label: '爱好', options: [{ value: 'reading', label: '阅读' }, { value: 'music', label: '音乐' }, { value: 'sports', label: '运动' }] },
        { type: 'radio', name: 'status', label: '状态', options: [{ value: 'active', label: '激活' }, { value: 'inactive', label: '未激活' }] },
      ],
    };
  },
  render(h) {
    const self = this;
    const fields = self.fields.map((field) => {
      const props = {
        props: {
          name: field.name,
          label: field.label,
          options: field.options,
          value: self.form[field.name],
        },
        on: {
          input: (value) => {
            self.form[field.name] = value;
          },
        },
      };
      return h(field.type, props);
    });
    return h('div', fields);
  },
};
</script>

<style>
/* 样式省略 */
</style>

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

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

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

闫炳岳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue的Render函数的参数
zzzz121380的博客
11-16 2952
Vue的Render函数的参数 render函数返回值的第一个参数：必选 ​ 可选类型：1、string：html标签 ​ 2、object：一个含有数据选项的对象 ​ 3、function：返回一个含有数据选项的对象 示例： Vue.component('child', { props: ['level'], render: function (createElement) { //string:
vue render 函数详解 (配参数详解)
最新发布
weixin_45563734的博客
03-31 4306
vue render 函数详解 (配参数详解)
vue render函数笔记
duanaibing3017的博客
03-22 1685
{ // 和 `v-bind:class` 的 API 相同 class: { foo: true, bar: false }, // 和 `v-bind:style` 的 API 相同 style: { color: 'red', fontSize: '14px' }, // 普通的 HTML 属性 attrs: { id:...
render 的第三个参数
weixin_33857230的博客
09-21 307
第三个参数 可以是string 也可以是array 第三个参数代表子节点 （如果是数组肯定就是第三个接点） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi...
vue中render函数的作用和参数(vue2中render函数用法)
weixin_45821809的博客
02-26 2571
vue中render函数的作用和参数(vue2中render函数用法)
何时/使用 Vue3 render 函数的教程详解
10-15
具体来说，Vue3中的render函数通常接收一个参数h，这个h是hyperscript的功能性帮助函数，用于创建虚拟DOM节点。在Vue3中，可以这样写render函数： ```javascript render(h) { return h('div', 'Hello'); } ``` ...
Vue中render函数的使用方法
08-28
在上面的示例中，我们使用 render 函数生成了一个评论组件，其中包含了三种标题样式（h1、h2、h3）。我们可以根据实际情况动态生成评论的标题样式和文字内容。 render 函数是一种强大的工具，能够帮助我们更好地...
vue中render函数的使用详解
10-17
Vue组件中的render函数接受一个参数createElement，它是一个用于创建VNode的方法。这个方法主要包含三个参数： 1. 第一个参数是必填的，它是字符串、对象或者一个组件选项对象。如果传入字符串，则这个字符串是HTML...
了解VUE的render函数的使用
08-30
在这个`render`函数中，`createElement`方法接受三个主要参数：第一个参数是元素类型，可以是HTML标签、组件或者函数；第二个参数是包含属性、样式和事件等的数据对象；第三个参数是子节点，可以是字符串或数组，...
Vue进阶——render函数
w807139809的博客
12-23 5327
render的理解与使用
Vue笔记之render函数(二):参数与特性(待填坑)
weixin_34250434的博客
10-14 678
前言 思维的混乱是自学的第一障碍,即便是看着官网资料,google一下也是必不可少的,知识点太碎,不整理根本记不住.配合官网教程服用风味更佳! 一个使用render函数会更合适的案例: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name=&q
vue中的render函数、h（）函数、函数式组件
^_^
02-06 7405
官网：用于编程式地创建组件虚拟 DOM 树的函数。在我们使用webpack脚手架创建项目时，都能在main.js中看到一个render函数对于render函数 es6中写成了箭头函数实际上createElement只是形参用h代表了，h()是的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是，但当你需要多次使用渲染函数时，一个简短的名字会更省力。
vue render function
weixin_30577801的博客
01-02 116
vue render function https://vuejs.org/v2/guide/render-function.html { // Same API as `v-bind:class`, accepting either // a string, object, or array of strings and objects. class: { foo:...
Vue-render函数的三个参数
weixin_34183910的博客
11-20 4061
render函数的第一个参数 第一个参数必选. 可选类型 string:html标签 object：一个含有数据选项的对象 function:返回一个含有数据选项的对象 Vue.component('child', { props: ['level'], render: function (createElement) { ...
vue3中使用render函数
热门推荐
long321041080的博客
01-19 2万+
vue3中使用render函数(使用setup语法糖和未使用setup语法糖写法)
vue2的render函数详解
如果相遇，那么你好哦~
08-26 2527
render函数和template一样，都是用来创建html模板的，但是有些场景里使用template实现起来会使代码冗余且复杂，因此产生了render函数。
vue render函数_一分钟了解Vue中的Render函数——Render Function
weixin_39814093的博客
12-08 569
介绍本篇同样是作为Vue的学习篇，要介绍的是Vue的Render函数，笔者也是初学者，如果遇到不对的或者有好的建议可以到评论区留言分享！从一个示例开始我们已经看到了组件及其用法。例如，我们有一个需要在整个项目中重用的内容。我们可以将其转换为组件并使用它。让我们看一个简单组件的示例，看看render函数在其中的作用：如下面的屏幕截图所示:现在，如果我们想重用组件，我们可以通过复制粘贴来完成：你看到的...
VUE的进阶理解之render函数
Mr_Javalearning的博客
05-15 1135
由于我是学的VUE，因此进行项目开发的时候肯定是组件化的，所以在理解render函数和组件之间的关系时，常常会表示不理解，我一开始也一样。以下是我对于render函数的一个学习过程。 1.render函数的参数请参照文档，不多说 createElement( 参数1：(string | object | function) 一个标签或组件选项或函数 参数2：(object) 一个对应属性的数据对象 参数3：(string | array) 子节点vnodes ) 2.子组件使用render函数后vue模板需
vue render函数的理解
april_4的博客
04-20 4433
官网上那个例子第一次看是有点懵的 点击打开链接然后看table组件，自己慢慢明白了点，需求是这样的，表格里面的东西，自己定制化的东西多，比如链接可能是需要自己拼接一个URl地址,如下图里面是什么都不一定，那么写组件的时候，不可能把所有情况都考虑到，需要去封装抽离一个专门用来填充的use([], function () { Vue.component('Cell', { pa...
vue中render函数详解
03-25
Vue 的 render 函数是 Vue 组件渲染的核心，通过 render 函数可以实现更加灵活的组件编写方式。下面是关于 Vue 中 render 函数的详细介绍： 1. 概念定义： Vue 的 render 函数是一个纯 JavaScript 函数，它接收一个 createElement 函数作为参数，用于生成虚拟 DOM，最终将组件渲染成 HTML。在 Vue 组件中，可以使用 render 函数来代替 template，这样可以更加灵活地渲染组件。 2. createElement 函数： createElement 函数是 Vue 中的一个工厂函数，用于快速创建虚拟 DOM 元素。createElement 函数接收三个参数，第一个参数是标签名或组件，第二个参数是属性对象，第三个参数是子节点。 使用 createElement 函数可以快速创建虚拟 DOM 元素，例如： ```javascript // 创建一个 div 元素 createElement('div', { class: 'wrapper' }, [ createElement('h1', {}, 'Hello Vue') ]) ``` 3. Vue 组件的 render 函数： Vue 组件的 render 函数接收一个 createElement 函数作为参数，通过该函数创建虚拟 DOM 元素。在 render 函数中，通过编写 JavaScript 代码来生成 DOM 元素，可以使用条件判断、循环语句等，从而实现更加灵活的组件渲染。 例如，下面是一个简单的 render 函数： ```javascript render (createElement) { return createElement('div', { class: 'wrapper' }, [ createElement('h1', {}, 'Hello Vue') ]) } ``` 4. render 函数与 template 的对比： 相对于 template，render 函数的优点在于：可以使用 JavaScript 代码生成 DOM 元素，可以进行条件判断、循环语句等；可以实现更加灵活的组件开发；可以更好地控制组件的渲染流程。 相对于 template，render 函数的缺点在于：需要熟悉 JavaScript 语法和 createElement 函数；在实现复杂组件时，需要编写更多的代码。 5. render 函数和 JSX： JSX 是 Facebook 出品的一种语法扩展，可以在 JavaScript 中编写类似 HTML 的语言。与 render 函数类似，JSX 也是将组件编写成 JavaScript 代码的方式。 Vue 也支持 JSX 语法，Vue 的 JSX 实现是通过 Babel 插件实现的。使用 JSX 可以更加直观地编写组件，但需要熟悉 JSX 语法和相关工具的使用。 6. 总结： render 函数是 Vue 组件的核心，它通过 createElement 函数创建虚拟 DOM 元素，最终将组件渲染成 HTML。相对于 template，render 函数可以实现更加灵活的组件开发，但需要熟悉 JavaScript 语法和 createElement 函数。同时，Vue 也支持 JSX 语法，可以更加直观地编写组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值