Vue.js教程
3.3.6 函数式组件
阅读(

Vue.js 基础

Vue.js 过渡和动画

Vue.js 可复用性和组合

Vue.js 混入

Vue.js 自定义指令

Vue.js 渲染函数 & JSX

JSX

使用 JavaScript 代替模板功能

createElement 参数

节点、树以及虚拟 DOM

基础

函数式组件

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

在这个例子中,我们标记组件为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()childrenslots().default不是和children类似的吗?在一些场景中,是这样,但是如果是函数式组件和下面这样的 children 呢?

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

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验