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段落标签。