Vuejs函式式元件，你值得擁有(1)

teal-front發表於2018-07-01
VueJS函式元件

函式式元件在React社群很流行使用，那麼在vue裡面我們要怎麼用呢

下面會涉及到的知識點： 高階函式、狀態、例項、vue元件

什麼是函式式元件

我們可以把函式式元件想像成元件裡的一個函式，入參是渲染上下文(render context)，返回值是渲染好的HTML

對於函式式元件，可以這樣定義：

  • Stateless(無狀態)：元件自身是沒有狀態的
  • Instanceless(無例項)：元件自身沒有例項，也就是沒有this

由於函式式元件擁有的這兩個特性，我們就可以把它用作高階元件(High order components)，所謂高階，就是可以生成其它元件的元件。就像日本的高精度的母機。

下面示例的完整Demo

那創造一個函式式元件吧

functional: true加上render function，就是一個最簡單的函式式元件啦，show your the code, 下面就建立一個名為FunctionButton.js的函式式元件

export default {
    name: 'functional-button',
    functional: true,
    render(createElement, context) {
        return createElement('button', 'click me')
    }
}
複製程式碼

就像上文所講的，函式式元件沒有this，引數就是靠context來傳遞的了，下面我們看下context有哪些屬性呢

Render context
  • props
  • children
  • slots (a slots object)
  • parent
  • listeners
  • injections
  • data

其中上面的data包含了其他屬性的引用，nibility。 在下面的範例中會有具體使用

現在建立一個App.vue來引入上面的函式式元件

<template>
    <FunctionalButton>
        click me
    </FunctionButton>
</template>
複製程式碼

上面的click me就是FunctionButton.js的childern屬性了，我們可以把元件改造下，由App.vue來定義元件的button按鈕

export default {
    name: 'funtional-button',
    functional: true,
    render(createElement, { children }) {
        return createElement('button', children)
    }
}
複製程式碼

看，上面用了ES6引數的解構，用{children}來代替context

事件定義

函式式元件沒有例項，事件只能由父元件傳遞。下面我們在App.vue上定義一個最簡單的click事件

<template>
  <FunctionalButton @click="log">
    Click me
  </FunctionalButton>
</template>
複製程式碼

對應的FunctionalButton.js

export default {
  functional: true,
  render(createElement, { props, listeners, children }) {
    return createElement(
      'button',
      {
        attrs: props,
        on: {
          click: listeners.click
        }
      },
      children
    );
  }
};
複製程式碼

對了，createElement裡事件屬性就是on了。具體可以看vue的官方文件

簡單的寫法

尤大設計的Api還是很人性的，上面涉及到的props、listeners那麼多要傳遞的，是不是很麻煩，所以尤大統一把這個屬性整合在data裡了，我們可以再改寫下

export default {
  functional: true,
  render(createElement, { data, children }) {
    return createElement( 'button', data, children );
  }
};
複製程式碼

恩，是不是感覺世界清爽了不少

這就是一個完整的高階元件了，下面小小的展示一下高階的魅力。

createElement('button', data, ['hello', ...children])
複製程式碼

恩，很簡單的就DIY了一個自帶hello的button按鈕

The end

上面就是關於函式式元件的基礎定義和基本使用了，希望對你們的學習有幫助。

打個廣告

公司現在急招前端開發，座標深圳南山，有興趣的可以看這裡，直接把簡歷發我郵箱吧。teal.yao@corp.to8to.com

相關文章