详解vue渲染函数render的使用

2024-09-29 12:40:23

1.什么是render函数？

vue通过 template 来创建你的 HTML。但是，在特殊情况下，这种写死的模式无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。

比如如下我想要实现如下html：

<div id="container">
 <h1>
  <a href="#" rel="external nofollow" rel="external nofollow" >
   Hello world!
  </a>
 </h1>
</div>

我们会如下使用：

 <!DOCTYPE html>
<html>
 <head>
  <title>演示Vue</title>
  <style>

  </style>
 </head>
 <body>
  <div id="container">
   <tb-heading :level="1">
    <a href="#" rel="external nofollow" rel="external nofollow" >Hello world!</a>
   </tb-heading>
  </div>
 </body>
 <script src="./vue.js"></script>

 <script type="text/x-template" id="templateId">
  <h1 v-if="level === 1">
   <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
   <slot></slot>
  </h2>
 </script>
 <script>
  Vue.component('tb-heading', {
   template: '#templateId',
   props: {
    level: {
     type: Number,
     required: true
    }
   }
  });
  new Vue({
   el: '#container'
  });
 </script>
</html>

2.例：

遇到的问题：

在工作中，我创建了一个button组件，又创建了一个button-group组件

button组件较为简单，就是一个可以输入type/size/icon等属性的button

此为渲染后结果。

然后，创建button-group组件，目标结果为

此处，不仅要在最外层包裹一层div，还要在每个button组件外层包裹一层p标签。此处，就需要使用render函数了。

既然有了render函数，就不再需要template标签了，vue文件中只需要script标签（该组件style是全局的）

button-group.vue如下

<script>
 export default {
  name: "XButtonGroup",
  props: {
   compact: { //自定义的button-group属性，影响其classname
    type: Boolean,
    default: true
   }
  },
  render(createElement) {
   //此处创建element
  },
  computed: {
   groupClass() {
    const className = ["field"];  //通过计算属性监听compact属性传入className
    className.push(this.compact ? "has-addons" : "is-grouped");
    return className;
   }
  }
 };
</script>

接下来就要看render函数了。

render函数中的createElement方法有三个参数。第一个参数为外层标签名，第二个为外层标签的属性对象，第三个为外层标签中的内容

所以第一步

  render(createElement) {
   return createElement(
    'div', {
     class: this.groupClass
    }, '内容',
   )
  }

渲染结果：

那怎样在外层div中渲染button组件呢？

render函数的第三个参数除了字符串，还可以传入VNode的数组。VNode就是vue中的节点。

此处，我们通过this.$slots.default获取所有插入到button-group组件内默认slot的button节点

  render(createElement) {
   return createElement(
    'div', {
     class: this.groupClass
    }, this.$slots.default,
   )
  },

渲染结果：

button已经正确渲染到了外层div中。但是怎么在每个button外层包裹一层元素呢。createElement会创建新的VNode，而render函数第三个参数需要VNode数组，所以我们需要传入一个由createElement返回值组成的数组。

  render(createElement) {
   //遍历每一个VNode,用createElement函数在外层包裹class为control的p标签，组成新的VNode数组
   const arry = this.$slots.default.map(VNode => {
    return createElement('p', {
     class: 'control'
    }, [VNode])
   })
   return createElement(
    'div', {
     class: this.groupClass
    }, arry,
   )
  },

渲染结果：

并且根据button-group的compact属性可以切换不同的class，生成不同的效果

<x-button-group :compact="true">
  <x-button v-for="(item,index) in buttonType" :key="index" :type="item">{{item}}</x-button>
</x-button-group>
<x-button-group :compact="false">
  <x-button v-for="(item,index) in buttonType" :key="index" :type="item">{{item}}</x-button>
</x-button-group>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue Render中slots的使用的实例代码

本文介绍了vue Render中slots的使用的实例代码,有需要了解vue Render中slots用法的朋友可参考.希望此文章对各位有所帮助. render 中 slot 的一般默认使用方式如下: this.$slots.default 对用 template的<slot>的使用没有name . 想使用多个slot 的话.需要对slot命名唯一.使用this.$slots.name 在render中添加多个slot. <body> <div class="&qu
浅谈vue的iview列表table render函数设置DOM属性值的方法

如下所示: { title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ src:params.row.leaderIdNumber }}) } }, 找了好多,终于找到了原因,如果想要让列表返回的是一个img标签,并且设置img的src,这里不能用props,而是要用domProps就ok了. 以上这篇浅谈vue的iview列表table render函数设置DOM属
vue深入解析之render function code详解

前言最近在深入的学习研究vue,其实vue在使用上入门并没有什么太高的门槛,但前端同学们也不该仅仅停留在使用上.以 vue 设计.编码之优秀,足当抽丝剥茧,扒开它的外壳,深入其原理.让我们一起来刺破 vue 的心脏,下面话不多说了,来一起看看详细的介绍吧. vue核心执行过程图 vue核心的执行过程主要分为这几个阶段: 1) 编译模板,生成可复用的render function code(这是今天要重点解读的),这一步在vue实例的整个生命周期中只会执行一次甚至零次,因为我们可以在打包的时候可
Vue.js render方法使用详解

前注: 版本限制: Vue.js 2.0+ 1.0无法使用没耐心,只关心有什么用的,想知道其大概是获取什么东西后生成的,可以直接看结尾的总结非使用render方法的情况完整代码: <!DOCTYPE html> <html> <head> <title>Vue的render方法说明</title> <script src="https://unpkg.com/vue@2.1.10/dist/vue.js">&
了解VUE的render函数的使用

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器. 在 HTML 层, 我们决定这样定义组件接口:通过传入不同的level 1-6 生成h1-h6标签,和使用slot生成内容 <div id="div1"> <child :level="1">Hello world!</chil
如何理解Vue的render函数的具体用法

本文介绍了如何理解Vue的render函数的具体用法,分享给大家,具体如下: 第一个参数(必须) - {String | Object | Function} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>render</title> <script src="https://cdn.b
深入理解vue Render函数

最近在学习vue,正好今日留个笔记,我自己还在摸索学习中,现整理出来以作记录. 会使用基本的Render函数后,就会想,这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶首先是v-if 的转化使用全局组件的v 值决定组件渲染的状态,对实例中传递的props的"nnum"值得控制可以自如的切换两种状态显示.这样就是和v-if 一样使用组件了 <div id="app"> <mycom :v="nnum&qu
Vue2.x中的Render函数详解

Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElement是render的核心方法.其Vue编译的时候会把template里面的节点解析成虚拟dom: 什么是虚拟dom? 虚拟dom不同于真正的dom,它是一个JavaScript对象.当状态发生变化的时候虚拟dom会进行一个diff判断/运算:然后判断哪些dom是需要被替换的而不是全部重绘,所以性能
详解vue渲染函数render的使用

1.什么是render函数? vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. 比如如下我想要实现如下html: <div id="container"> <h1> <a href="#" rel="external nofollow" rel="external nofollow"
详解vue渲染从后台获取的json数据

公司项目原来用的框架扩展性太差,准备更新前台页面然后用vue渲染dom 然后我写了一个demo $(document).ready(function(){ $.ajax({ type:"post", url:"", async:true, data:{ }, dataType:"json", success:function(data){ var a=new Vue({ el:"#detail-info-id", data:
vue渲染方式render和template的区别

render函数详解 Vue中的Render函数中有一个参数,这个参数是一个函数通常我们叫做h.其实这个h叫做createElement.Render函数将createElement的返回值放到了HTML中 createElement这个函数中有3个参数第一个参数(必要参数):主要用于提供DOM的html内容,类型可以是字符串.对象或函数第二个参数(类型是对象,可选):用于设置这个DOM的一些样式.属性.传的组件的参数.绑定事件之类第三个参数(类型是数组,数组元素类型是VNode,可选):
Vue渲染函数详解

前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器.本文将详细介绍Vue渲染函数引入下面是一个例子,如果要实现类似下面的效果.其中,H标签可替换 <h1> <a name="hello-world" href="#hello-world" rel="external nofol
详解Vue.js3.0 组件是如何渲染为DOM的

本文主要是讲述 Vue.js 3.0 中一个组件是如何转变为页面中真实 DOM 节点的.对于任何一个基于 Vue.js 的应用来说,一切的故事都要从应用初始化「根组件(通常会命名为 APP)挂载到 HTML 页面 DOM 节点(根组件容器)上」说起.所以,我们可以从应用的根组件为切入点. 主线思路:聚焦于一个组件是如何转变为 DOM 的. 辅助思路: 涉及到源代码的地方,需要明确标记源码所在文件,同时将 TS 简化为 JS 以便于直观理解思路每前进一步要能够得出结论尽量总结归纳出流程图应用
详解Vue的组件中data选项为什么必须是函数

官方解释 data 必须是函数构造 Vue 实例时传入的各种选项大多数都可以在组件里使用.只有一个例外:data 必须是函数.实际上,如果你这么做: Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' } }) 那么 Vue 会停止运行,并在控制台发出警告,告诉你在组件实例中 data 必须是一个函数.但理解这种规则为何存在也是很有益处的,
详解Vue 自定义hook 函数

目录定义使用封装发ajax请求的hook函数(ts版本) 定义什么是hook? 本质是一个函数,把 setup 函数中使用的 Composition API (组合API)进行了封装类似于 vue2.x 中的 mixin 自定义 hook 的优势: 复用代码,让 setup 中的逻辑更清楚易懂使用首先我们做一个功能,鼠标点击屏幕,获取坐标: <template> <h2>当前鼠标的坐标是:x:{{ point.x }},y:{{ point.y }}</h2&g
详解Vue文档中几个易忽视部分的剖析

针对Vue文档中部分大家可能不会去研读的内容,我做了个小总结,作为有经验者的快餐,不是特别适合初学者,可能有不妥之处,希望大家多提建议. 节省代码量的mixin mixin概念:组件级可复用逻辑,包括数据变量/生命周期钩子/公共方法,从而在混入的组件中可以直接使用,不用重复写冗余逻辑(类似继承) 使用方法: 在某一公共文件夹pub下创建mixin文件夹,其下创建mixinTest.js const mixinTest = { created() { console.log(`components
详解vue高级特性

Vue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平. 一.watch进阶从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用: watch:{ a(){ //doSomething } } 实际上,Vue对watch提供了很多进阶用法. handler函数以对象和handler函数的方式来定义一个监听属性,handler就是处理监听变动时的函数: watch:{ a:{ handler:'doSomething' } }, methods:{ doSomet
详解vue 组件

Vue的两大核心 1. 数据驱动 - 数据驱动界面显示 2. 模块化 - 复用公共模块,组件实现模块化提供基础组件基础组件渲染过程 template ---> ast(抽象语法树) ---> render ---> VDom(虚拟DOM) ---> 真实的Dom ---> 页面 Vue组件需要编译,编译过程可能发生在打包过程 (使用vue文件编写) 运行时(将字符串赋值template字段,挂载到一个元素上并以其 DOM 内部的 HTML 作为模板) 对应的两种方式 r

详解vue渲染函数render的使用

相关推荐

随机推荐