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。　

二、slots()和children對比

slots().default 和 children 類似

不同之處在於：

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

　　

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