Vue.jsで機能コンポーネントをレンダリングする方法は複数あります。 ユースケースとあなた自身の好みに応じて、あなたはお互いを好むかもしれません、それはあなたがあなたの好みに適応することができるフレームワークからの素晴らしいことです。

Vue.js 機能コンポーネントでは、レンダリング関数を使用してFunctionalButtonコンポーネントを作成する方法を見てきました。 単純な例では問題ありませんが、より洗練された例では苦痛になる可能性があります。

そのFunctionalButtonの例を見て、他にどのオプションがあるか見てみましょう。 内部的には、それらはすべてレンダリング関数にコンパイルされることに注意してください。

レンプレート

このオプションはVueバージョン2.5.0以降で使用可能であり、テンプレートがVueのデフォルトの方法であることを考えると、おそらく最も人気のあるオプションの1つであるため、おそらくこのオプションに精通しているはずです。

次の内容のFunctionalButtonTemplate.vueファイルを作成しましょう。

FunctionalButtonTemplate.vue
<template functional>
  <button :disabled="props.disabled" @click="listeners.click">
    <slot />
  </button>
</template>

ご覧のとおり、propslistenersなどのプロパティにアクセスすることで、コンテキストオブジェクトに直接アクセスできます。 childrenプロパティは、テンプレートの場合と同様に、デフォルトのslotです。

このアプローチの唯一の欠点は、テンプレートの使用がプレーンJavaScript(またはJavaScriptでもあるJSX)よりも制限されているため、高次のコンポーネントを作成したり、小道具を操作したりできないことです。

JSX

JSXは、 babel-plugin-transform-vue-jsx を使用してトランスパイルされた、レンダリング関数を作成するためのはるかに優れた方法です。 これは、Reactでコンポーネントを作成するための事実上の方法であり、Vueでも同様に有効です。

FunctionalButtonコンポーネントのJSXバージョンを作成しましょう。

FunctionalButtonJSX.js
export default {
  functional: true,
  render: (h, { data, children }) =>
    <button {...data}>
      {children}
    </button >
};

主な利点は、HTMLのような構文で、レンダリング関数とJavaScriptの全機能を利用できることです。 そのため、{...data}と書くことで、小道具を簡単にプロキシできます。

JSX機能

Reactユーザーが前のJSXの例を見ると、おそらくなぜその機能が必要なのか:本当のことですか?と言うでしょう。 単純な関数をエクスポートするだけでよいので、これは有効なステートメントです。それだけです。

これを書いている時点では、babel-plugin-jsx-vue-functionalを使用してVueでそれを行うことができます。 あなたがする必要があるのはそれをインストールすることです:

$ npm install --save-dev babel-plugin-jsx-vue-functional

次に、それを.babelrc構成に追加します。

.babelrc
{
  "presets": ["es2015"],
  "plugins": ["jsx-vue-functional", "transform-vue-jsx"]
}

そして最後に、名前付き矢印関数をエクスポートするだけで、前の例を記述できます。

FunctionalButtonFunction.js
export const FunctionalButton = ({ data, children }) =>
  <button {...data}>
    {children}
  </button >

まとめ

ご覧のとおり、Vueの主な利点の1つは、コンポーネントをいくつかの方法で記述できるようにすることで親しみやすく、さまざまな人やチームに適応するフレームワークにすることです。

このコードサンドボックスでこの記事のコードを見つけてください