VUE のコンパイルスコープとスロットスコープのスロットの問題について

スロットとは何ですか?スロットディレクティブは v-slot であり、現在 slot と slot-scope、スロットコンテンツ、vue インスタンス、コンテンツ配信 API のセットを置き換え、配信されたコンテンツを運ぶための出口としてスロット要素を使用します。

スロットは、単一スロット、名前付きスロット、スコープ付きスロットに分けられます。最初の 2 つは比較的単純なので、ここでは説明しません。今日は、スコープ付きスロットについて説明します。
簡単に言えば、最初の 2 つのスロットのコンテンツとスタイルは親コンポーネントによって決定されます。つまり、表示されるコンテンツとその表示方法は親コンポーネントによって決定されます。
スコープ付きスロットのスタイルは親コンポーネントによって決定されますが、コンテンツは子コンポーネントによって制御されます。簡単に言うと、最初の 2 種類のスロットはデータをバインドできず、スコープスロットはバインドされたデータを持つスロットです。

ここではVUEのコンパイルスコープとスロットスコープについて紹介します。見てみましょう！

実際、コンポーネントが多数ある場合、コンポーネント内で変数を使用すると、変数のスコープは、それが定義されているコード内で実際に見つかります。見つからない場合は、エラーが報告されます。[これは非常に基本的なことで、誰でもわかります]

正式には、親コンポーネントテンプレート内のすべてが親スコープでコンパイルされ、子コンポーネントテンプレート内のすべてが子スコープでコンパイルされます。

次の例はこれを完璧に示しています。

スコープ付きスロットは理解するのが難しい点なので、注意深く理解する必要があります。

次に、ソフトウェアの要件について説明します。

サブコンポーネントにはデータのセットがあります。たとえば、pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++'] です。これをサブコンポーネントのスロットに配置し、一部にはリスト表示、一部には - リンク、一部には * リンクを付けます。

まずソースコードを見てみましょう (スロットは使用されず、ハードコードされており、このコードではスロットスコープを使用するように書き直されています)。

ソースコード:

<!DOCTYPE html>
<html lang="ja">
    <ヘッド>
        <メタ文字セット="UTF-8">
        <title>ショッピングカート</title>
        <script src="js/vue.js"></script>
    </head>
    <本文>
            <!-- 未使用スロットの下のテンプレートはハードコードされています -->
        <テンプレートid="cpn">
                <div>
                	<ul>
                    <li v-for="pLanguages のアイテム">{{item}}</li>
                	</ul>
                </div>
        </テンプレート>

        <div id="アプリ">
              <cpn></cpn>
        </div>


        
        <スクリプト>
            constアプリ = 新しいVue({
                el: "#app",
                コンポーネント:
                    'cpn': {
                        テンプレート: "#cpn",
                        データ（） {
                            戻る {
                                言語: ['JavaScript'、'Python'、'Swift'、'Go'、'C++']
                            }
                        }
                    }
                }
            })
        </スクリプト>

    </本文>
</html>

したがって、スロットを使用する場合は、

<!DOCTYPE html>
<html lang="ja">
    <ヘッド>
        <メタ文字セット="UTF-8">
        <title>ショッピングカート</title>
        <script src="js/vue.js"></script>
    </head>
    <本文>
            <!-- スロットが使用され、スロットのデフォルト値が以下のように設定されます -->
        <テンプレートid="cpn">
              <div>
               <スロット> <!-- 変更済み -->
                   <ul>
                       <li v-for="pLanguages のアイテム">{{item}}</li>
                   </ul>
               </スロット>
              </div>
        </テンプレート>

        <div id="アプリ">
              <cpn></cpn> <!-- デフォルトの値リスト形式を使用します -->
              <cpn> <!-- 変更済み -->
              
                    <!-- 問題はここにあります。cpn コンポーネントのデータ内のデータをリンクの形で表示したいのですが、それができません。
                    スコープのため、ここでのスコープは Vue インスタンス アプリです。 Vueインスタンスアプリのデータのみ取得可能です！
                     したがって、次のコードは間違っています。 ！ ！ では、スロット コードが子コンポーネントからデータを取得する問題をどのように解決するのでしょうか?
                     -->
                    
                    <span v-for="pLanguages 内の項目">{{項目 + "-"}}</span>
                    
              </cpn>
        </div>


        
        <スクリプト>
            constアプリ = 新しいVue({
                el: "#app",
                コンポーネント:
                    'cpn': {
                        テンプレート: "#cpn",
                        データ（） {
                            戻る {
                                言語: ['JavaScript'、'Python'、'Swift'、'Go'、'C++']
                            }
                        }
                    }
                }
            })
        </スクリプト>

    </本文>
</html>

コードは詳細に説明されており、問題点はマークされています。要約すると、次のようになります。

サブコンポーネントの範囲内ではないので、サブコンポーネントでスロットコードがデータを取得する問題をどのように解決すればよいでしょうか?

解決策: スロットスコープスロットを使用する

VUE のコンパイルスコープとスロットスコープに関するこの記事はこれで終わりです。より関連性の高い vue スコープスロットコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: