Vue におけるスロットと名前付きスロットの役割の簡単な分析

Vue を使ったことがある人なら、多かれ少なかれ

Vue のスロットを使ったことがあると思いますが、その使い方を理解していますか?この記事では、Vue でのスロットと名前付きスロットの基本的な使い方について説明します。お役に立てば幸いです。

1. スロット

1.1. スロットの機能

⭐⭐
スロットの最初の紹介:

• このコンポーネントをより多用途にするために、コンポーネント内のコンテンツを固定の div、span## に制限することはできません。 #これらの要素を待ちます; [関連する推奨事項: vuejs ビデオ チュートリアル ]
たとえば、特定の状況でコンポーネントを使用し、そのコンポーネントにボタンが表示されることを期待します。 、コンポーネントを使用して表示するのは画像です;
• どのコンテンツと要素を特定の領域に保存するかをユーザーが決定できるようにする必要があります;
• したがって、スロットを使用して次のことを解決できます。この問題

つまり、コンポーネント タグに新しいコンテンツを追加したい場合は、コンポーネント内でスロットを宣言する必要があります。そうしないと、追加された新しいコンテンツは宣言されません。レンダリング ##⭐⭐

slot
• 要素をスロットとして使用します挿入されるコンテンツは次によって異なります親要素がそれをどのように使用するか。たとえば、親コンポーネントがボタンまたは画像を挿入した場合、ボタンの画像が表示されます。そうでない場合は、表示されないか、スロットのデフォルトのコンテンツが表示されます。
• スロットを使用するときに、対応するコンテンツが挿入されていない場合、デフォルトのコンテンツを表示する必要がある場合があります:
• もちろん、このデフォルトのコンテンツは、挿入されたコンテンツが提供されていない場合にのみ表示されます。 ;
• slot
• タグでデフォルトのコンテンツを設定できます
スロット ケースを使用します:

親コンポーネント

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">&lt;template&gt; &lt;div class=&quot;app&quot;&gt; &lt;!-- 内容是button --&gt; &lt;show-message title=&quot;哈哈哈&quot;&gt; &lt;button&gt;我是按钮元素&lt;/button&gt; &lt;/show-message&gt; &lt;!-- 内容是超链接 --&gt; &lt;show-message&gt; &lt;a href=&quot;#&quot;&gt;百度一下&lt;/a&gt; &lt;/show-message&gt; &lt;!-- 没有值传递 --&gt; &lt;show-message&gt;&lt;/show-message&gt; &lt;/div&gt; &lt;/template&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>サブコンポーネント

showMessage.vue
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">&lt;template&gt; &lt;h2&gt;{{title}}&lt;/h2&gt; &lt;div class=&quot;content&quot;&gt; &lt;slot&gt; &lt;p&gt;我是默认值&lt;/p&gt; &lt;/slot&gt; &lt;/div&gt; &lt;/template&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

• 
  コンポーネント showMessage
  でスロットを与え、App.vue で
showMessage
• を 3 回再利用していることがわかります。 、 ボタン に対して 1 回、
ラベル
• に対して 1 回、 何も追加せずに 1 回 結果は 、 1 つはボタン 、1 つの
はリンク
• 、 はスロットのデフォルトの p ラベルです ##We
  

#Inつまり、スロットが使用されている場合、親要素がボタンを使用している場合は子要素にボタンが表示され、親要素がタイトルを使用している場合は子要素にタイトルが表示されます。 #1.2. 名前付きスロット Slot

⭐⭐
望ましい効果は、スロットの対応するコンテンツを表示することです。今回は名前付きスロットを使用できます:
• 名前付きスロットは、名前が示すように、スロットに名前を付けます。
slot

属性: name# があります。 ##;

のない

には、暗黙的な名前
• デフォルト ; が付けられます。つまり、次のことができます。各スロットに名前を付けます。親コンポーネントで
を使用する場合は、
• template タグでラップし、## を template で使用する必要があります。 #v-solt: スロットの略称という名前のスロット名
#親コンポーネント
• App.vue<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">&lt;template&gt; &lt;nav-bar&gt; &lt;template v-slot:left&gt; &lt;button&gt;返回&lt;/button&gt; &lt;/template&gt; &lt;template v-slot:center&gt; &lt;span&gt;内容&lt;/span&gt; &lt;/template&gt; &lt;template v-slot:right&gt; &lt;a href=&quot;#&quot;&gt;登录&lt;/a&gt; &lt;/template&gt; &lt;/nav-bar&gt; &lt;/template&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>サブコンポーネント
• NavBar.vue (CSS で色を調整できるため、ここには記載しません)

<template>
    <div class="nav-bar">
        <div class="left">
            <slot name="left">left</slot>
        </div>
        <div class="center">
            <slot name="center">center</slot>
        </div>
        <div class="right">
            <slot name="right">right</slot>
        </div>
    </div>
</template>

ログイン後にコピー
レンダリング:


達成される効果は、スロットに対応する表示です これが名前付きスロットの役割です

⭐⭐
動的スロット名 パス v-slot: [dynamicSlotName]
名前を動的にバインドする方法;

Ps: スコープ スロットもありますが、まだよく理解していないので、書き留めません~
(学習ビデオ共有 :
Web フロントエンド開発
、

基本プログラミング ビデオ

)



以上がVue におけるスロットと名前付きスロットの役割の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。