Vuejs関数コンポーネント、あなたは持つ価値があります(1)

関数コンポーネントはReactコミュニティで流行していますが、vueではどう使いますか.
次の知識点:高次関数、ステータス、インスタンス、vueコンポーネント
関数コンポーネントとは
関数コンポーネントをコンポーネントの関数として想像することができます.パラメータはレンダリングコンテキスト(render context)、戻り値はレンダリングされたHTMLです.
関数コンポーネントでは、次のように定義できます.

Stateless(ステータスなし):コンポーネント自体がステータスなしの

Instanceless(インスタンスなし):コンポーネント自体にインスタンスがない、つまりthis

がない
関数コンポーネントが持つこの2つの特性により,高次コンポーネント(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)
    }
}

見て、上はES 6パラメータの解構を用いて、{children}の代わりにcontextを用いた.
イベント定義
関数コンポーネントにはインスタンスがなく、イベントは親コンポーネントのみで伝達されます.次に、App.vueで最も簡単なclickイベントを定義します.

対応する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])

はい、簡単にhello付きbuttonボタンをDIYしました.
The end
上は関数式コンポーネントの基礎定義と基本的な使用について、あなたたちの学習に役立つことを望んでいます.
広告を出す
会社は今急いで先端の開発を募集して、座標深セン南山、興味があるのはここを見て、直接履歴書を私のメールボックスに送ってください[email protected]