真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網站制作重慶分公司

怎么在vue中使用render函數(shù)-創(chuàng)新互聯(lián)

這篇文章給大家介紹怎么在vue中使用render函數(shù)，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

發(fā)展壯大離不開廣大客戶長期以來的信賴與支持，我們將始終秉承“誠信為本、服務至上”的服務理念，堅持“二合一”的優(yōu)良服務模式，真誠服務每家企業(yè)，認真做好每個細節(jié)，不斷完善自我，成就企業(yè)，實現(xiàn)共贏。行業(yè)涉及人造霧等，在網站建設、成都營銷網站建設、WAP手機網站、VI設計、軟件開發(fā)等項目上具有豐富的設計經驗。

render函數(shù)

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

render方法的實質就是生成template模板；

通過調用一個方法來生成，而這個方法是通過render方法的參數(shù)傳遞給他的；

通過這三個參數(shù)，可以生成一個完整的模板

官網實例

//未使用render函數(shù)
Vue.component('anchored-heading', {
 template: '#anchored-heading-template',
 props: {
  level: {
   type: Number,
   required: true
  }
 }
})

//使用render函數(shù)
Vue.component('anchored-heading', {
 render: function (createElement) {
  return createElement(
   'h' + this.level,  // tag name 標簽名稱
   this.$slots.default // 子組件中的陣列
  )
 },
 props: {
  level: {
   type: Number,
   required: true
  }
 }
})

說明

區(qū)別：

  • 沒有顯示的模板內容，而是通過render方法生成

  • 使用了createElement方法

createElement方法，通過render函數(shù)的參數(shù)傳遞進來，有三個參數(shù)：

  • 第一個參數(shù)（必要參數(shù)）：主要用于提供DOM的html內容，類型可以是字符串、對象或函數(shù)

  • 第二個參數(shù)（類型是對象，可選）：用于設置這個DOM的一些樣式、屬性、傳的組件的參數(shù)、綁定事件之類

  • 第三個參數(shù)（類型是數(shù)組，數(shù)組元素類型是VNode，可選）：主要是指該結點下還有其他結點，用于設置分發(fā)的內容，包括新增的其他組件。注意，組件樹中的所有VNode必須是唯一的

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

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

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

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

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

首先render函數(shù)生成的內容相當于template的內容，故使用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ā)不同的邏輯，就不多敘述了。

然后在父組件調用

使用jsx

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

 render() {
  return (
   

    {this.text}
   

  );
 },

關于怎么在vue中使用render函數(shù)就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。


新聞名稱：怎么在vue中使用render函數(shù)-創(chuàng)新互聯(lián)
文章源于：http://weahome.cn/article/dgjdsd.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部