3.3.6 函数式组件

优质

小牛编辑

127浏览

2023-12-01

之前创建的锚点标题组件是比较简单，没有管理或者监听任何传递给他的状态，也没有生命周期方法。它只是一个接收参数的函数。

在这个例子中，我们标记组件为functional，这意味它是无状态 (没有data)，无实例 (没有this上下文)。

一个函数式组件就像这样：

Vue.component('my-component', {
  functional: true,
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
    // ...
  },
  // Props 可选
  props: {
    // ...
  }
})

注意：在 2.3.0 之前的版本中，如果一个函数式组件想要接受 props，则props选项是必须的。在 2.3.0 或以上的版本中，你可以省略props选项，所有组件上的属性都会被自动解析为 props。

在 2.5.0 及以上版本中，如果你使用了单文件组件，那么基于模板的函数式组件可以这样声明：

<template functional>
</template>

组件需要的一切都是通过上下文传递，包括：

props：提供 props 的对象
children: VNode 子节点的数组
slots: slots 对象
data：传递给组件的 data 对象
parent：对父组件的引用
listeners: (2.3.0+) 一个包含了组件上所注册的v-on侦听器的对象。这只是一个指向data.on的别名。
injections: (2.3.0+) 如果使用了inject选项，则该对象包含了应当被注入的属性。

在添加functional: true之后，锚点标题组件的 render 函数之间简单更新增加context参数，this.$slots.default更新为context.children，之后this.level更新为context.props.level。

因为函数式组件只是一个函数，所以渲染开销也低很多。然而，对持久化实例的缺乏也意味着函数式组件不会出现在Vue devtools的组件树里。

在作为包装组件时它们也同样非常有用，比如，当你需要做这些时：

程序化地在多个组件中选择一个
在将 children, props, data 传递给子组件之前操作它们。

下面是一个依赖传入 props 的值的smart-list组件例子，它能代表更多具体的组件：

var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }

Vue.component('smart-list', {
  functional: true,
  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
    )
  },
  props: {
    items: {
      type: Array,
      required: true
    },
    isOrdered: Boolean
  }
})

向子元素或子组件传递特性和事件

在普通组件中，没有被定义为 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修饰符。

如果你使用基于模板的函数式组件，那么你还需要手动添加特性和监听器。因为我们可以访问到其独立的上下文内容，所以我们可以使用data.attrs传递任何 HTML 特性，也可以使用listeners(即data.on的别名)传递任何事件监听器。

<template functional>
  <button
    class="btn btn-primary"
    v-bind="data.attrs" 
    v-on="listeners"
  >
    <slot/>
  </button>
</template>

`slots()`和`children`对比

你可能想知道为什么同时需要slots()和children。slots().default不是和children类似的吗？在一些场景中，是这样，但是如果是函数式组件和下面这样的 children 呢？

<my-functional-component>
  <p slot="foo">
    first
  </p>
  <p>second</p>
</my-functional-component>

对于这个组件，children会给你两个段落标签，而slots().default只会传递第二个匿名段落标签，slots().foo会传递第一个具名段落标签。同时拥有children和slots()，因此你可以选择让组件通过slot()系统分发或者简单的通过children接收，让其他组件去处理。

3.3.6 函数式组件

向子元素或子组件传递特性和事件

slots()和children对比

`slots()`和`children`对比