Vue の非レンダリング動作スロットの詳細な説明-Vue.js-php.cn

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

青灯夜游

リリース： 2020-10-14 17:29:47

転載

1871 人が閲覧しました

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

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

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

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

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

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

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

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

例: 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 に基づいてツリーコンポーネントを作成するとします。

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

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 この方法にはいくつかの欠点があります。

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

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

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

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

<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: [&#39;on&#39;,&#39;action&#39;]

  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: [&#39;on&#39;,&#39;action&#39;]

  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>

ログイン後にコピー