render函數、createElement函數與vm.$slots

1、render函數、createElement函數

Vue.component('es-header', { render: function (createElement) { return createElement({ 'div', '我是header' }) }, props: {} }) // 等同於
Vue.component('es-header', { template: '<div>我是dom元素</div>', props: {} })

　　createElement 函數的作用就是生成一個 VNode節點（虛擬dom），

　　render 函數得到createElement() 創建的 VNode 節點之后，返回給 Vue.js 的 mount 函數，渲染成真實 DOM 節點，並掛載到根節點上。

　　就是這么簡單 別想多了。

2、vm.$slots

　　vm.$slots是一個對象，鍵名是所有具名slot的名稱，加上一個default，而鍵值則是一個存放VNode節點的數組。

　　官方文檔：用來訪問被 slot 分發的內容。每個具名 slot 有其相應的屬性（例如：slot="foo" 中的內容將會在 vm.$slots.foo 中被找到），default 屬性則包括了所有沒有被包含在具名 slot 中的節點。

　　實例：

<blog-post>
  <h1 slot="header">我屬於header</h1>
  <h1 slot="header">我也屬於header</h1>
  <p>我誰都不屬於</p>
  <p slot="footer">我屬於footer</p>
  <p>誰來認領我</p>
</blog-post>

　　我們看下這個blog-post的示例：在blog-post標簽里，元素被我們這樣設置：屬於header的slot有2個h1；屬於footer的slot的有1個<p>，屬於不具名slot（會歸到default里）的有2個<p>及4個空的VNode節點

 　　如果像下面這樣，指定了render函數的話，就可以手動創建出html標簽。

Vue.component('blog-post', { render: function (createElement) { var header = this.$slots.header var body = this.$slots.default
    var footer = this.$slots.footer return createElement('div', [ createElement('header', header), createElement('main', body), createElement('footer', footer) ]) } })

　　createElement(html標簽名，VNode節點數組) 會編譯出一個指定的html標簽，然后把VNode節點數組里非空的節點編譯回原來的html內容。其結果就相當於把原來的那些<blog-post>標簽之間的內容根據它們的slot屬性，放進了指定的標簽里。