Vue.js の機能コンポーネントを理解する

Vue の関数コンポーネントは、レンダリング コンテキストを受け取り、レンダリングされた HTML を返すコンポーネントであり、インスタンスはありません。機能コンポーネントを作成するには、function: true 属性とレンダリング関数を使用してオブジェクトを作成する必要があります。

機能コンポーネントを使用すると、コンテキストを渡すことで簡潔な方法で単純なコンポーネントを作成できるため、非常にシンプルで非常に人気があります。次に記事で紹介するのは、一定の参考価値のある Vue.js の機能コンポーネントですので、皆様の参考になれば幸いです。

#【おすすめコース: Vue.js チュートリアル #】

機能コンポーネントとは

#機能コンポーネントは、コンポーネント関連の関数として見ることができます。つまり、レンダリング コンテキストを受け取り、レンダリングされた HTML を返すコンポーネントです。 。実例がないので、これもありません。

機能コンポーネントの作成

機能コンポーネントを作成するには、

function: true 属性とレンダリング関数を使用してオブジェクトを作成する必要があります。 FunctionalButton コンポーネントの例は、次の例で作成されます。

export default {
  functional: true,
  render(createElement, context) {
    return createElement('button', 'Click me');
  }};

レンダリング コンテキスト

contextレンダリング関数で見られるパラメータは、レンダリング コンテキストと呼ばれます。これは、次のプロパティを含むオブジェクトです。

props: プロパティを提供するオブジェクト

children: VNode 子ノードの配列

slots: 関数はスロット オブジェクトを返します。

parent: 親コンポーネントへの参照

listeners: コンポーネントに登録されている v-on リスナーを含むオブジェクト。これは data.on を指す単なるエイリアスです。

injections: inject オプションが使用される場合、オブジェクトには注入される必要があるプロパティが含まれます。

data: 以前のすべてのプロパティを含むオブジェクト

トリガー イベント

機能コンポーネントにはインスタンスがないため、イベント リスナーは context.listeners から取得されます。プロパティの親なので、次のコードを使用してクリック イベントを実装できます。

例: App.vue コンポーネントがあり、FunctionalButton.js をインポートしてそのテンプレートで使用できるとします

<template>
  <FunctionalButton>
    Click me
  </FunctionalButton></template>

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

概要 : 以上がこの記事の全内容です。皆様のお役に立てれば幸いです。

以上がVue.js の機能コンポーネントを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。