vue函數化組件 functional

須要在組件中把functional 設置爲true

一個函數化組件像這樣：

Vue.component('testcomponent', {
 functional: true,
 // 爲了彌補缺乏的實例
 // 提供第二個參數做爲上下文
 render: function (createElement, context) {
  // ...
 },
 // Props 可選
 props: {
  level：{type:Number,default:1}
 }
})

組件須要的一切都是經過上下文傳遞,函數化組件只是一個函數，因此渲染開銷也低不少

• props: 提供props 的對象
• children: VNode 子節點的數組
• slots: slots 對象
• data: 傳遞給組件的 data 對象
• parent: 對父組件的引用

this.$slots.default 更新爲 context.children，以後this.level 更新爲 context.props.level。　

2、slots()和children對比

slots().default 和 children 相似

不一樣之處在於：

<createElement>
    <template #head>aaaaa</template>
    <p>bbbb</p>
    <template #footer>ccccc</template>
</createElement>

　　

children 會給你三個段落標籤，而 slots().default 只會傳遞第二個匿名段落標籤，slots().head會傳遞第一個具名爲head段落標籤。