vue中render函數的使用

wenshi11019 發布于2019-08-23 12:17 / 2049人閱讀

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

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}
      
    );
  },

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98267.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