この記事では、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 に基づいてツリー コンポーネントを作成するとします。
SVG の表示と動作を提供したいとします。クリックしたときと同様 ノードを撤回してテキストを強調表示するとき。
問題は、これらの動作をハードコーディングせず、コンポーネントのユーザーが自由にオーバーライドできるようにする場合に発生します。
これらの動作を公開する簡単な解決策は、コンポーネントにメソッドとイベントを追加することです。
次のように実装できます:
<script> export default { mounted() { // pseudo code nodes.on('click',(node) => this.$emit('click', 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: ['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>
動作であるコンポーネントは自己記述的です。
on
プロパティは、すべてのコンポーネント イベントにアクセスできます。デフォルトでは、このスロットでは新しいイベントが利用可能です。
レンダリングレス スロットは、コンポーネント内のメソッドとイベントを公開するための興味深いソリューションを提供します。より読みやすく再利用可能なコードが提供されます。
このモードを実装するツリー コンポーネントのコードは、github にあります: Vue.D3.tree
元の英語アドレス: https:// alligator.io/vuejs/renderless-behavior-slots/
著者: David Desmaisons
関連する推奨事項:
詳細 プログラミング関連の知識については、プログラミング入門をご覧ください。 !
以上がVue の非レンダリング動作スロットの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。