Vue の非レンダリング動作スロットの詳細な説明

この記事では、Vue のレンダリングレス スロット モードがどのような問題の解決に役立つかについて説明します。

Vue.js 2.3.0 で導入されたスコープ付きスロットにより、コンポーネントの再利用性が大幅に向上します。レンダリングレス コンポーネント パターンは、再利用可能な動作とプラグイン可能な表現を提供するという問題を解決するために登場しました。

ここでは、逆の問題、つまり再利用可能な外観とプラグ可能な動作を提供する方法を解決する方法を見ていきます。

レンダリングレス コンポーネント

このパターンは、複雑な動作を実装し、プレゼンテーションをカスタマイズできるコンポーネントに適しています。

これは次の機能を満たします:

1. このコンポーネントはすべての動作を実装します
2. スコープのスロットはレンダリングを担当します
3. フォールバック コンテンツは次のことを保証します。コンポーネントが直接使用できること。

例: Ajax リクエストを実行し、スロットの結果を表示するコンポーネント。このコンポーネントは Ajax リクエストを処理して状態を読み込み、デフォルトのスロットがプレゼンテーションを提供します。

これは実装の簡略化されたバージョンです:

<template>
  <div>
    <slot v-if="loading" name="loading">
        <div>Loading ...</div>
    </slot>
    <slot v-else v-bind={data}>
    </slot>
  </div>
</template>

<script>
export default {
  props: ["url"],
  data: () => ({
    loading: true,
    data: null
  }),
  async created() {
    this.data = await fetch(this.url);
    this.loading = false;
  }
};
</script>

使用法:

<lazy-loading url="https://server/api/data">
  <template #default="{ data }">
    <div>{{ data }}</div>
  </template>
</lazy-loading>

このパターンに関する元の記事については、ここでご覧ください。

反対の質問

問題が逆だったらどうなるでしょうか: コンポーネントの主な機能がその表現であり、さらにその動作がカスタマイズ可能である必要がある場合を想像してください。

以下に示すように、SVG に基づいてツリー コンポーネントを作成するとします。

SVG の表示と動作を提供したいとします。クリックしたときと同様 ノードを撤回してテキストを強調表示するとき。

問題は、これらの動作をハードコーディングせず、コンポーネントのユーザーが自由にオーバーライドできるようにする場合に発生します。

これらの動作を公開する簡単な解決策は、コンポーネントにメソッドとイベントを追加することです。

次のように実装できます:

<script>
export default {
  mounted() {
    // pseudo code
    nodes.on(&#39;click&#39;,(node) => this.$emit(&#39;click&#39;, node));
  },
  methods: {
    expandNode(node) {
      //...
    },
    retractNode(node) {
      //...
    },
    highlightText(node) {
      //...
    },
  }
};
</script>

コンポーネントのユーザーがコンポーネントに動作を追加したい場合は、親コンポーネントで ref を使用する必要があります。例:

<template>
  <tree ref="tree" @click="onClick"></tree>
</template>

<script>
export default {
  methods: {
    onClick(node) {
      this.$refs.tree.retractNode(node);
    }
  }
};
</script>

This この方法にはいくつかの欠点があります。

1. デフォルトの動作は提供できなくなりました
2. 動作コードは頻繁にコピーして貼り付けることになります
3. 動作は再利用できません

レンダリングレス スロットがこれらの問題をどのように解決するかを見てみましょう。

レンダリングレス スロット

行動は基本的に、イベントに対する反応を示すことで構成されます。それでは、イベントとコンポーネント メソッドへのアクセスを受け取るスロットを作成しましょう。

<template>
  <div>
    <slot name="behavior" :on="on" :actions="actions">
    </slot>
  </div>
</template>

<script>
export default {
  methods: {
    expandNode(node) { },
    retractNode(node) { },
   //...
  },
  computed:{
    actions() {
      const {expandNode, retractNode} = this;
      return {expandNode, retractNode};
    },
    on() {
      return this.$on.bind(this);
    }
  }
};
</script>

on プロパティは親コンポーネントの $on メソッドなので、すべて聞いてください。イベント。

この動作は、レンダリングレス コンポーネントとして実装できます。次に、クリック拡張コンポーネントを作成します:

export default {
  props: ['on','action']

  render: () => null,

  created() {
    this.on("click", (node) => {
      this.actions.expandNode(node);
    });
  }
};

使用法:

<tree>
  <template #behavior="{ on, actions }">
    <expand-on-click v-bind="{ on, actions }"/>
  </template>
</tree>

このソリューションの主な利点は次のとおりです:

• 代替コンテンツを通じてデフォルトの動作を提供できる可能性:

たとえば、グラフィカル コンポーネントを次のように宣言することで、

<template>
  <div>
    <slot name="behavior" :on="on" :actions="actions">
      <expand-on-click v-bind="{ on, actions }"/>
    </slot>
  </div>
</template>

• 再利用可能なコンポーネントを作成し、このコンポーネントのユーザーが選択できる標準の動作を実装できます

ホバー ハイライト コンポーネントを検討します:

export default {
  props: ['on','action']

  render: () => null,

  created() {
    this.on("hover", (node) => {
      this.actions.highlight(node);
    });
  }
};

標準の動作をオーバーライドします:

<tree>
  <template #behavior="{ on, actions }">
    <highlight-on-hover v-bind="{ on, actions }"/>
  </template>
</tree>

• 動作スロットは構成可能です

Add 2 つの事前定義された動作:

<tree>
  <template #behavior="{ on, actions }">
    <expand-on-click v-bind="{ on, actions }"/>
    <highlight-on-hover v-bind="{ on, actions }"/>
  </template>
</tree>

• ソリューションの読みやすさ

動作であるコンポーネントは自己記述的です。

• Extensibility

on プロパティは、すべてのコンポーネント イベントにアクセスできます。デフォルトでは、このスロットでは新しいイベントが利用可能です。

概要

レンダリングレス スロットは、コンポーネント内のメソッドとイベントを公開するための興味深いソリューションを提供します。より読みやすく再利用可能なコードが提供されます。

このモードを実装するツリー コンポーネントのコードは、github にあります: Vue.D3.tree

元の英語アドレス: https:// alligator.io/vuejs/renderless-behavior-slots/

著者: David Desmaisons

関連する推奨事項:

2020フロントエンド vue 面接の質問の概要 (回答付き)

vue チュートリアルの推奨事項: 2020 年の最新の vue.js ビデオ チュートリアル 5 選

詳細 プログラミング関連の知識については、プログラミング入門をご覧ください。 ！

以上がVue の非レンダリング動作スロットの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。