Vue中render方法的使用詳解

更新時間：2018年01月26日 15:30:29 作者：HellowWorldZz

這篇文章主要為大家詳細介紹了Vue中render方法的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下

先說一下對官網(wǎng)上demo的個人理解:

<!DOCTYPE html>
<html>
<head>
  <title>Vue的render方法說明</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <child :level="1">
    hello world
  </child>
</div>

<script type="text/x-template" id="anchored-heading-template">
  <div>
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-if="level === 6">
      <slot></slot>
    </h6>
  </div>
</script>

<script type="text/javascript">
Vue.component('child', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
});
  new Vue({
    el: "#app"
  })
</script>
</body>
</html>

雖然使用template定義組件的方法非常的直觀,但是這樣會造成代碼過長。可以使用render的方法

<!DOCTYPE html>
<html>
<head>
  <title>Vue的render方法說明</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <child :level="1">
    hello world
  </child>
</div>
<script type="text/javascript">
Vue.component('child', {
  render:function (createElement) {
    var body=this.$slots.default;
    //this.$slots返回了一個組件分發(fā)下來的元素和內(nèi)容
    //this.$slots.default返回了具名的內(nèi)容
    return createElement(
      'h'+this.level,
      //this.level是利用v-bind注入到組件中的level
      body
    )
  },
  //因為vue中組件父組件無法向子組件注入內(nèi)容。所以我們需要通過
  //v-bind定義一個key，value向子組件注入內(nèi)容。所要接收的值也需要在定義組件時的props屬性中的定義一下
  props:{
    level:{

    }
  }
});
  new Vue({
    el: "#app"
  })
</script>
</body>
</html>

下面是一個slot具名分發(fā)的demo:介紹了creatElement的用法:

<!DOCTYPE html>
<html>
<head>
  <title>Vue的render方法說明</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <child>
    <p slot="header">this is header</p>
    <p slot="center">this is center</p>
    <p slot="footer">this is footer</p>
  </child>
</div>


<script type="text/javascript">
  Vue.component('child', {
    render: function (createElement) {
     var header=this.$slots.header;
     var center=this.$slots.center;
     var footer=this.$slots.footer;
//createElement第一個參數(shù)是標簽名,第二個參數(shù)是值
     return createElement('div',[
       createElement('div', header),
       createElement('div', center),
       createElement('div', footer),
     ])
    }
  });
  new Vue({
    el: "#app"
  })
</script>
</body>
</html>

所創(chuàng)建的組件的demo結果如下:

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue
render

vue.js的vue-cli腳手架中使用百度地圖API的實例
今天小編就為大家分享一篇關于vue.js的vue-cli腳手架中使用百度地圖API的實例，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-01-01
vue-router實現(xiàn)tab標簽頁（單頁面）詳解
這篇文章主要為大家詳細介紹了vue-router實現(xiàn)tab標簽頁的相關方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
vue操作動畫的記錄animate.css實例代碼
這篇文章主要介紹了vue操作動畫的記錄animate.css的相關知識，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-04-04
vue3中事件處理@click的用法詳解
@click指令用于監(jiān)聽元素的點擊事件,并在觸發(fā)時執(zhí)行相應的處理函數(shù),在Vue3中,事件處理就可以通過@click指令來實現(xiàn),下面我們就來看看如何在Vue3中處理點擊事件吧
2023-08-08
Vue使用$attrs實現(xiàn)爺爺直接向孫組件傳遞數(shù)據(jù)
這篇文章主要為大家詳細介紹了Vue如何使用$attrs實現(xiàn)爺爺直接向孫組件傳遞數(shù)據(jù),文中的示例代碼講解詳細,感興趣的小伙伴可以了解一下
2024-02-02
VUE配置history路由模式配置詳細舉例
這篇文章主要給大家介紹了關于VUE配置history路由模式配置的相關資料,History模式是Vue路由的另一種模式,在History模式下URL中的路徑不再使用#符號,而是直接使用正常的路徑形式,需要的朋友可以參考下
2023-12-12
如何在vue3+ts項目中使用query和params傳參
Vue3中的路由傳參有兩種方式:query和params,下面這篇文章主要給大家介紹了關于如何在vue3+ts項目中使用query和params傳參的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-04-04
VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀
這篇文章主要介紹了VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue之debounce屬性被移除及處理詳解
今天小編就為大家分享一篇vue之debounce屬性被移除及處理詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
利用Vue3和element-plus實現(xiàn)圖片上傳組件
element-plus提供了uploader組件，但是不好定制化。所以本文將利用Vue3和element-plus實現(xiàn)一個圖片上傳的組件，感興趣的可以了解一下
2022-03-03