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