vue中render函数的使用

zhangqh 发布于2019-08-02 11:41 / 608人阅读

摘要：函数通过来创建你的。什么情况下适合使用函数在一次封装一套通用按钮组件的工作中，按钮有四个样式。遇上类似这样的情况，使用函数可以说最优选择了。根据实际情况改写按钮组件首先函数生成的内容相当于的内容，故使用函数时，在文件中需要先把标签去掉。

render函数

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

什么情况下适合使用render函数

在一次封装一套通用按钮组件的工作中，按钮有四个样式(success、error、warning、default)。首先，你可能会想到如下实现

  {{ text }}
  {{ text }}
  {{ text }}

这样写在按钮样式少的时候完全没有问题，但是试想，如果需要的按钮样式有十多个。那么template写死的方式就显得很无力了。遇上类似这样的情况，使用render函数可以说最优选择了。

根据实际情况改写按钮组件

首先render函数生成的内容相当于template的内容，故使用render函数时，在.vue文件中需要先把template标签去掉。只保留逻辑层。

export default {
  props: {
    type: {
      type: String,
      default: "normal"
    },
    text: {
      type: String,
      default: "normal"
    }
  },
  computed: {
    tag() {
      switch (this.type) {
        case "success":
          return 1;
        case "danger":
          return 2;
        case "warning":
          return 3;
        default:
          return 1;
      }
    }
  },
  render(h) {
    return h("div", {
      class: {
        btn: true,
        "btn-success": this.type === "success",
        "btn-danger": this.type === "danger",
        "btn-warning": this.type === "warning"
      },
      domProps: {
        innerText: this.text
      },
      on: {
        click: this.handleClick
      }
    });
  },
  methods: {
    handleClick() {
      console.log("-----------------------");
      console.log("do something");
    }
  }
};

根据组件化思维，能抽象出来的东西绝不写死在逻辑上。这里的clickHandle函数可以根据按钮的type类型触发不同的逻辑，就不多叙述了。

然后在父组件调用

使用jsx

是的，要记住每个参数的类型同用法，按序传参实在是太麻烦了。那么其实可以用jsx来优化这个繁琐的过程。

  render() {
    return (
      
        {this.text}
      
    );
  },

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53054.html

Vue不同编译输出文件的区别

摘要：源码是选用了作为，看的源码时发现对应了不同的构建选项。这也对应了最后打包构建后产出的不同的包。第四种构建方式对应的构建脚本为不同于前面种构建方式这一构建对应于将关于模板编译的成函数的单独进行打包输出。 Vue源码是选用了rollup作为bundler，看Vue的源码时发现：npm script对应了不同的构建选项。这也对应了最后打包构建后产出的不同的包。不同于其他的library，V...

awesome23 2019-08-21 11:54 评论0 收藏0
关于一些Vue的文章。（2）

摘要：原文链接我的，欢迎。这次想要分享的一篇文章是从一个奇怪的错误出发理解的基本概念。瞬间明白了，原来是函数，一个考验编程能力的函数，比更接近编译器。来看这里有一个小知识点被忽略在实例挂载之后，元素可以用访问脑补会用到的场景中。。。原文链接我的blog，欢迎STAR。这次想要分享的一篇文章是：从一个奇怪的错误出发理解Vue的基本概念。这篇文章以Vue的两种构建方式做为切入点，深入探讨...

DirtyMind 2019-08-20 15:33 评论0 收藏0
Vue.js-Render函数

摘要：函数通过参数来创建虚拟，结构精简。其中，访问的用法，使用场景集中在函数。使用代替模板功能在函数中，不再需要内置的指令，比如。方法时快速改变数组结构，返回一个新数组。学习笔记：Render函数 Render函数 Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点，提升渲染性能。 Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点，提升...

ccj659 2019-08-23 16:03 评论0 收藏0
vue源码阅读之数据渲染过程

摘要：图在中应用三数据渲染过程数据绑定实现逻辑本节正式分析从到数据渲染到页面的过程，在中定义了一个的构造函数。一、概述 vue已是目前国内前端web端三分天下之一，也是工作中主要技术栈之一。在日常使用中知其然也好奇着所以然，因此尝试阅读vue源码并进行总结。本文旨在梳理初始化页面时data中的数据是如何渲染到页面上的。本文将带着这个疑问一点点追究vue的思路。总体来说vue模版渲染大致流程如图1所...

AlphaGooo 2019-05-22 16:53 评论0 收藏0
【Vue源码探究二】从 $mount 讲起，一起探究Vue的渲染机制

摘要：的构造函数将自动运行启动函数。我在阅读源码的过程中，发现源码余行，而和模板编译相关的代码，则约有行左右。这个是创建的方法，作为第一个参数传入。最后会返回一个节点。这个时候将赋值为这个节点，挂载完成 mount，意思为挂载。可以理解为将vue实例（逻辑应用），挂靠在某个dom元素（载体）上的一个过程。一、创建Vue实例时的渲染过程上一篇文章我们讲到，在创建一个vue实例的时候(v...

LeanCloud 2019-08-20 16:40 评论0 收藏0
vue源码解读－component机制

摘要：通过的合并策略合并添加项到新的构造器上缓存父构造器处理和相关响应式配置项在新的构造器上挂上的工具方法缓存组件构造器在上总的来说是返回了一个带有附加配置相的新的的构造器。在函数中，构造器叫做，等待时候初始化。身为原来的jquery，angular使用者。后面接触了react和vue。渐渐的喜欢上了vue。抱着学习的态度呀。看看源码。果然菜要付出代价。一步步单步调试。头好疼。看到哪里记到...

1treeS 2019-08-21 11:43 评论0 收藏0