コンポーネントの拡張性を高めるための Vue スロットの詳細な説明-Vue.js-php.cn

コンポーネントの拡張性を高めるための Vue スロットの詳細な説明

WBOY

リリース： 2022-08-10 15:09:03

転載

1631 人が閲覧しました

この記事では、vue に関する関連知識を提供します。主に、コンポーネントのスケーラビリティを向上させるスロットに関連する問題について紹介します。コンポーネントのスロットは、カプセル化したコンポーネントをより機能的にするためでもあります。拡張性により、コンポーネント内にどのようなコンテンツを表示するかをユーザーが決定できるようにします。見てみましょう。皆さんの役に立つことを願っています。

コンポーネントの拡張性を高めるための Vue スロットの詳細な説明

【関連する推奨事項: javascript ビデオチュートリアル、vue.js チュートリアル】

slot スロット

コンポーネントのスロット

コンポーネントのスロットは、パッケージ化されたコンポーネントのスケーラビリティを高めるためのものでもあります。セックス。
コンポーネント内のどのコンテンツを表示するかをユーザーが決定できるようにします。

このタイプのコンポーネントをカプセル化するにはどうすればよいですか?スロット

それらには多くの違いもありますが、多くの共通点もあります。

コンポーネントを個別にカプセル化する場合、それは明らかに不適切です。たとえば、各ページが返される場合、コンテンツのこの部分を繰り返しカプセル化する必要があります。
しかし、これらを 1 つにカプセル化するのは不合理に思えます。左側のメニュー、リターン、中央の検索、テキストなどです。

適切にカプセル化するにはどうすればよいでしょうか?

共通点を抽出し、相違点を保持します。

カプセル化する最良の方法は、共通点をコンポーネント に抽出し、相違点をスロットとして公開することです。
スロットを予約すると、ユーザーは自分のニーズに応じてスロットにどのコンテンツを挿入するかを決定できます。
それは検索ボックス、テキスト、またはメニューですか。それは発信者の判断次第です。

スロットの基本的な使用法

サブコンポーネントでは、特別な要素を使用してサブコンポーネント用のスロットを開くことができます。
このスロットに何が挿入されるかは、親コンポーネントの使用方法によって異なります。

簡単な例を通じて、サブコンポーネントのスロットを定義します。
<slot></slot>他のコンテンツの場合、コンテンツはデフォルトで表示されます
コンポーネントの拡張性を高めるための Vue スロットの詳細な説明

nbsp;html>



    <meta>
    <meta>
    <title>Document</title>
    <script></script>



    <div>
        <cpn><button>按钮</button></cpn>
        <cpn><span>aaaaa</span></cpn>
    </div>
    <template>
        <div>
            <h2>我是子组件</h2>
            <h3>hahaha</h3>
            <slot></slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                }
            }
        })
    </script>

ログイン後にコピー

名前付きスロット slot

サブコンポーネントの機能が複雑な場合、サブコンポーネント のスロットは、 。

たとえば、ナビゲーションバーのサブコンポーネントをカプセル化する場合、それぞれ左、中央、右を表す 3 つのスロットが必要になる場合があります。では、スロットにコンテンツを挿入するとき、どのコンテンツが挿入されているかをどのように区別するのでしょうか?

名前付きスロットの使用方法?

スロット要素に name 属性を与えるだけです
<slot name="myslot"></slot>

nbsp;html>



    <meta>
    <meta>
    <title>Document</title>
    <script></script>



    <div>
        <cpn><button>按钮1</button></cpn>
        <cpn><span>aaaaa</span>
            <button>按钮2</button></cpn>
    </div>
    <template>
        <div>
            <h2>我是子组件</h2>
            <h3>hahaha</h3>
            <slot></slot><br>
            <slot></slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                }
            }
        })
    </script>

ログイン後にコピー

スコープスロット

本質:

親コンポーネントはスロットのラベルを置き換えますが、コンテンツは子コンポーネントによって提供されます## ＃。要件:

サブコンポーネントには、次のようなデータのセットが含まれます:

pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C ' ]

複数のインターフェースに表示する必要があります:

一部のインターフェースは横方向に 1 つずつ表示されます

一部のインターフェースはリスト形式で表示されます
一部のインターフェイスは配列を直接表示します
コンテンツは子コンポーネントにあり、それを親コンポーネントに表示したい場合:

Through

slotProps 属性を取得します渡したばかりのデータは、

<div>
        <cpn></cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('-')}}</span>
            </template>
        </cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('*')}}</span>
            </template>
        </cpn>
    </div>

ログイン後にコピー

<template>
        <div>
            <slot>
                <ul>
                <li>{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>

ログイン後にコピー

を通じて取得できます。

nbsp;html>



    
    
    Document
    <script></script>



    <div>
        <cpn></cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('-')}}</span>
            </template>
        </cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('*')}}</span>
            </template>
        </cpn>
    </div>
    <template>
        <div>
            <slot>
                <ul>
                <li>{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                    data() {
                        return {
                            pLanguages: [&#39;JavaScript&#39;, &#39;Python&#39;, &#39;Swift&#39;, &#39;Go&#39;, &#39;C++&#39;],
                        }
                    }
                }
            }
        })
    </script>

ログイン後にコピー