以前建立的锚点标题组件是比较简单,没有管理任何状态,也没有监放任何传递给它的状态,也没有生命周期方法。实际上,它只是一个接受一些 prop
的函数。
在这样的场景下,咱们能够将组件标记为 functional
,这意味它无状态 (没有响应式数据),也没有实例 (没有 this
上下文)。
一个函数式组件就像这样:html
Vue.component('my-component', { functional: true, // Props 是可选的 props: { // ... }, // 为了弥补缺乏的实例 // 提供第二个参数做为上下文 render: function (createElement, context) { // ... } })
注意:在 2.3.0 以前的版本中,若是一个函数式组件想要接收 prop
,则 props
选项是必须的。在 2.3.0 或以上的版本中,你能够省略 props
选项,全部组件上的特性都会被自动隐式解析为 prop
。
当使用函数式组件时,该引用将会是 HTMLElement,由于他们是无状态的也是无实例的。
在 2.5.0 及以上版本中,若是你使用了单文件组件,那么基于模板的函数式组件能够这样声明:web
<template functional> </template>
组件须要的一切都是经过 context
参数传递,它是一个包括以下字段的对象:数组
在添加 functional: true
以后,须要更新咱们的锚点标题组件的渲染函数,为其增长 context
参数,并将 this.$slots.default
更新为 context.children
,而后将 this.level
更新为 context.props.level
。
由于函数式组件只是函数,因此渲染开销也低不少。
在做为包装组件时它们也一样很是有用。好比,当你须要作这些时:app
children
、props
、data
传递给子组件以前操做它们。下面是一个 smart-list
组件的例子,它能根据传入 prop
的值来代为渲染更具体的组件:svg
var EmptyList = { /* ... */ } var TableList = { /* ... */ } var OrderedList = { /* ... */ } var UnorderedList = { /* ... */ } Vue.component('smart-list', { functional: true, props: { items: { type: Array, required: true }, isOrdered: Boolean }, render: function (createElement, context) { function appropriateListComponent () { var items = context.props.items if (items.length === 0) return EmptyList if (typeof items[0] === 'object') return TableList if (context.props.isOrdered) return OrderedList return UnorderedList } return createElement( appropriateListComponent(), context.data, context.children ) } })
在普通组件中,没有被定义为 prop
的特性会自动添加到组件的根元素上,将已有的同名特性进行替换或与其进行智能合并。
然而函数式组件要求你显式定义该行为:函数
Vue.component('my-functional-button', { functional: true, render: function (createElement, context) { // 彻底透传任何特性、事件监听器、子节点等。 return createElement('button', context.data, context.children) } })
经过向 createElement
传入 context.data
做为第二个参数,咱们就把 my-functional-button
上面全部的特性和事件监听器都传递下去了。事实上这是很是透明的,以致于那些事件甚至并不要求 .native
修饰符。ui
若是你使用基于模板的函数式组件,那么你还须要手动添加特性和监听器。由于咱们能够访问到其独立的上下文内容,因此咱们可使用 data.attrs
传递任何 HTML 特性,也可使用 listeners
(即 data.on
的别名) 传递任何事件监听器。this
<template functional> <button class="btn btn-primary" v-bind="data.attrs" v-on="listeners" > <slot/> </button> </template>
你可能想知道为何同时须要 slots()
和 children
。slots().default
不是和 children
相似的吗?在一些场景中,是这样——但若是是以下的带有子节点的函数式组件呢?spa
<my-functional-component> <p v-slot:foo> first </p> <p>second</p> </my-functional-component>
对于这个组件,children
会给你两个段落标签,而 slots().default
只会传递第二个匿名段落标签,slots().foo
会传递第一个具名段落标签。同时拥有 children
和 slots()
,所以你能够选择让组件感知某个插槽机制,仍是简单地经过传递 children
,移交给其它组件去处理。code