vue中render函數(shù)的使用

zhangqh 發(fā)布于2019-08-02 11:41 / 609人閱讀

摘要：函數(shù)通過來創(chuàng)建你的。什么情況下適合使用函數(shù)在一次封裝一套通用按鈕組件的工作中，按鈕有四個樣式。遇上類似這樣的情況，使用函數(shù)可以說最優(yōu)選擇了。根據(jù)實際情況改寫按鈕組件首先函數(shù)生成的內(nèi)容相當于的內(nèi)容，故使用函數(shù)時，在文件中需要先把標簽去掉。

render函數(shù)

vue通過 template 來創(chuàng)建你的 HTML。但是，在特殊情況下，這種寫死的模式無法滿足需求，必須需要js的編程能力。此時，需要用render來創(chuàng)建HTML。

什么情況下適合使用render函數(shù)

在一次封裝一套通用按鈕組件的工作中，按鈕有四個樣式(success、error、warning、default)。首先，你可能會想到如下實現(xiàn)

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

這樣寫在按鈕樣式少的時候完全沒有問題，但是試想，如果需要的按鈕樣式有十多個。那么template寫死的方式就顯得很無力了。遇上類似這樣的情況，使用render函數(shù)可以說最優(yōu)選擇了。

根據(jù)實際情況改寫按鈕組件

首先render函數(shù)生成的內(nèi)容相當于template的內(nèi)容，故使用render函數(shù)時，在.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");
    }
  }
};

根據(jù)組件化思維，能抽象出來的東西絕不寫死在邏輯上。這里的clickHandle函數(shù)可以根據(jù)按鈕的type類型觸發(fā)不同的邏輯，就不多敘述了。

然后在父組件調(diào)用

使用jsx

是的，要記住每個參數(shù)的類型同用法，按序傳參實在是太麻煩了。那么其實可以用jsx來優(yōu)化這個繁瑣的過程。

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

GPU云服務(wù)器云服務(wù)器 vue 中使用 webrtc vue中使用webrtc jsp中使用函數(shù) js中函數(shù)的調(diào)用、

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/53054.html

相關(guān)文章

Vue不同編譯輸出文件的區(qū)別

摘要：源碼是選用了作為，看的源碼時發(fā)現(xiàn)對應(yīng)了不同的構(gòu)建選項。這也對應(yīng)了最后打包構(gòu)建后產(chǎn)出的不同的包。第四種構(gòu)建方式對應(yīng)的構(gòu)建腳本為不同于前面種構(gòu)建方式這一構(gòu)建對應(yīng)于將關(guān)于模板編譯的成函數(shù)的單獨進行打包輸出。 Vue源碼是選用了rollup作為bundler，看Vue的源碼時發(fā)現(xiàn)：npm script對應(yīng)了不同的構(gòu)建選項。這也對應(yīng)了最后打包構(gòu)建后產(chǎn)出的不同的包。不同于其他的library，V...

awesome23 2019-08-21 11:54 評論0 收藏0
關(guān)于一些Vue的文章。（2）

摘要：原文鏈接我的，歡迎。這次想要分享的一篇文章是從一個奇怪的錯誤出發(fā)理解的基本概念。瞬間明白了，原來是函數(shù)，一個考驗編程能力的函數(shù)，比更接近編譯器。來看這里有一個小知識點被忽略在實例掛載之后，元素可以用訪問腦補會用到的場景中。。。原文鏈接我的blog，歡迎STAR。這次想要分享的一篇文章是：從一個奇怪的錯誤出發(fā)理解Vue的基本概念。這篇文章以Vue的兩種構(gòu)建方式做為切入點，深入探討...

DirtyMind 2019-08-20 15:33 評論0 收藏0
Vue.js-Render函數(shù)

摘要：函數(shù)通過參數(shù)來創(chuàng)建虛擬，結(jié)構(gòu)精簡。其中，訪問的用法，使用場景集中在函數(shù)。使用代替模板功能在函數(shù)中，不再需要內(nèi)置的指令，比如。方法時快速改變數(shù)組結(jié)構(gòu)，返回一個新數(shù)組。學(xué)習(xí)筆記：Render函數(shù) Render函數(shù) Vue2與Vue1最大的區(qū)別就在于Vue2使用了虛擬DOM來更新DOM節(jié)點，提升渲染性能。 Vue2與Vue1最大的區(qū)別就在于Vue2使用了虛擬DOM來更新DOM節(jié)點，提升...

ccj659 2019-08-23 16:03 評論0 收藏0
vue源碼閱讀之數(shù)據(jù)渲染過程

摘要：圖在中應(yīng)用三數(shù)據(jù)渲染過程數(shù)據(jù)綁定實現(xiàn)邏輯本節(jié)正式分析從到數(shù)據(jù)渲染到頁面的過程，在中定義了一個的構(gòu)造函數(shù)。一、概述 vue已是目前國內(nèi)前端web端三分天下之一，也是工作中主要技術(shù)棧之一。在日常使用中知其然也好奇著所以然，因此嘗試閱讀vue源碼并進行總結(jié)。本文旨在梳理初始化頁面時data中的數(shù)據(jù)是如何渲染到頁面上的。本文將帶著這個疑問一點點追究vue的思路?？傮w來說vue模版渲染大致流程如圖1所...

AlphaGooo 2019-05-22 16:53 評論0 收藏0
【Vue源碼探究二】從 $mount 講起，一起探究Vue的渲染機制

摘要：的構(gòu)造函數(shù)將自動運行啟動函數(shù)。我在閱讀源碼的過程中，發(fā)現(xiàn)源碼余行，而和模板編譯相關(guān)的代碼，則約有行左右。這個是創(chuàng)建的方法，作為第一個參數(shù)傳入。最后會返回一個節(jié)點。這個時候?qū)①x值為這個節(jié)點，掛載完成 mount，意思為掛載。可以理解為將vue實例（邏輯應(yīng)用），掛靠在某個dom元素（載體）上的一個過程。一、創(chuàng)建Vue實例時的渲染過程上一篇文章我們講到，在創(chuàng)建一個vue實例的時候(v...

LeanCloud 2019-08-20 16:40 評論0 收藏0
vue源碼解讀－component機制

摘要：通過的合并策略合并添加項到新的構(gòu)造器上緩存父構(gòu)造器處理和相關(guān)響應(yīng)式配置項在新的構(gòu)造器上掛上的工具方法緩存組件構(gòu)造器在上總的來說是返回了一個帶有附加配置相的新的的構(gòu)造器。在函數(shù)中，構(gòu)造器叫做，等待時候初始化。身為原來的jquery，angular使用者。后面接觸了react和vue。漸漸的喜歡上了vue。抱著學(xué)習(xí)的態(tài)度呀。看看源碼。果然菜要付出代價。一步步單步調(diào)試。頭好疼?？吹侥睦镉浀?..

1treeS 2019-08-21 11:43 評論0 收藏0