スロットとは何ですか? Vue3 でスロットを使用する方法について話しましょう

Vue Vue を使ったことがある人なら誰でも多かれ少なかれスロットを使ったことがあると思いますが、その用途をすべて知っていますか?この記事では、ギャップを見つけて埋めるのに役立つ、Vue3 のスロットの使用法をすべて説明します。 (学習ビデオ共有: vue ビデオ チュートリアル )

スロットとは

簡単に言えば、サブで提供されるスロットです。 -component 親コンポーネントによって使用される ピット 。<slot></slot> で表されます。親コンポーネントは、このピットに任意のテンプレート コードを入力し、その後 ##子コンポーネントの #<slot></slot> はこれらの内容に置き換えられます。たとえば、最も単純なスロットの例

//父组件
<template>
  <div>
    <child>Hello Juejin</child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//子组件Child
<template>
    <div>
        <p>1</p>
        <slot></slot>
        <p>2</p>
    </div>
</template>

では、子コンポーネントの

<slot></slot> は、子コンポーネント タグ の間に配置された親コンポーネントです。 スペースのコンテンツ。もちろん、この期間中に任意のコード スニペットを渡すことができ、そのコード スニペットは <slot></slot> の位置に配置されます。

##同様に、

//父组件
<template>
  <div>
    <child>{{ msg }}</child>
  </div>
</template>
<script>
import { ref } from &#39;vue&#39;
import Child from &#39;./Child.vue&#39;
const msg = ref(&#39;Hello Juejin&#39;)
</script>

のように、タグ <child></child> の間に変数を入れることもできます。 まず、以下について説明します。頻繁に現れる 2 つの単語

スロット

と スロット コンテンツ は、その後の読み方での混乱を防ぐためのものです:

同じ

スロット

は、この msg 変数を表します。したがって、子コンポーネント slot は親コンポーネントのデータ スコープにアクセスできますが、slot content は子コンポーネントのデータ (つまり、次の 2 つの &lt) にはアクセスできません。親コンポーネント ;Child> の間では子コンポーネント内のデータは使用できません)、これがいわゆるレンダリング スコープです。 slot パラメータを slot content に渡す方法は後ほど紹介します。

Default content

は、親コンポーネント

slot content

が指定されている場合、子コンポーネントの slot のデフォルトのコンテンツ (現時点では <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">//子组件 &lt;template&gt;     &lt;div&gt;         &lt;slot&gt;我是默认内容&lt;/slot&gt;     &lt;/div&gt; &lt;/template&gt; //父组件1 &lt;template&gt;   &lt;div&gt;     &lt;child&gt;&lt;/child&gt;   &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import Child from &amp;#39;./Child.vue&amp;#39; &lt;/script&gt; //父组件2 &lt;template&gt;   &lt;div&gt;     &lt;child&gt;Hello Juejin&lt;/child&gt;   &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import Child from &amp;#39;./Child.vue&amp;#39; &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> など) を指定できます。親コンポーネント 1

デフォルトのコンテンツを表示

##親コンポーネント 2

#提供されたコンテンツを表示

# #NamedSlot

1 つの スロット

ではニーズを満たせないことが多く、複数の

スロットが必要になります。したがって、名前付きの slot

である

named slot があります。簡単に言うと、この 名前付きスロット の目的は、ニンジンを罠にかけて、あるべき場所に留まらせることです。たとえば、name のスロットは、名前付きスロットと呼ばれます。 name が指定されていない には、暗黙的に「default」という名前が付けられます。親コンポーネントでは、v-slot:xxx (#xxx と省略可能) ディレクティブの

動的スロット名

動的スロット名は、変数形式のスロット名です。この変数はいつでも変更して、さまざまな効果を表示できます。

v-slot:[変数名]

と表記するか、

#[変数名]と省略します。

//父组件
<template>
  <div>
    <child>
      <!-- 等同于#smallTurnip -->
      <template>
        小萝卜
      </template>
      <template>
        中萝卜
      </template>
      <template>
        大萝卜
      </template>
    </child>
  </div>
</template>
<script>
import { ref } from &#39;vue&#39;
import Child from &#39;./Child.vue&#39;
const slotName = ref(&#39;smallTurnip&#39;)
</script>

スコープ スロットスコープ スロット

前述のスロットの内容

アクセスすることは不可能ですサブコンポーネントのデータですが、

スロット コンテンツのサブコンポーネントのステータスにアクセスしたい場合はどうすればよいでしょうか?

実際、

slot は、プロパティを親コンポーネントの slot content## にバインドすることで、slot タグに渡すことができます。コンポーネント。まず、デフォルトのスロット

//子组件
<template>
    <div>
        <slot></slot>
    </div>
</template>

//父组件

<template>
  <div>
    <child>
      My name is {{ slotProps.personName }} and I am {{ slotProps.age }} years old this year
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

の値の転送方法を見てみましょう。slotによって提供されるデータを構造体<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;template&gt;   &lt;div&gt;     &lt;child&gt;       My name is {{ personName }} and I am {{ age }} years old this year     &lt;/child&gt;   &lt;/div&gt; &lt;/template&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>##の形式で取得することもできます。 #<p>注意不能绑定<code>name属性，因为你绑定了name它就成了具名插槽了。同样具名插槽中的name属性也不会传递给插槽内容。因为传递的参数只能在插槽内容中使用，所以这类能够接受参数的插槽就被称为了作用域插槽。

具名作用域插槽

下面再看下具名作用域插槽它的传参方式。它接收参数的方式是通过template标签的指令v-slot的值获取的，所以可以缩写成这样

//父组件
<template>
  <div>
    <child>
      <template>
        {{ bigTurnipProps.message }}
      </template>
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//子组件Child.vue

<template>
    <div>
        <!-- 大萝卜 -->
        <div>
            <slot></slot>
        </div>
    </div>
</template>

这类插槽便是具名作用域插槽啦

写在最后

到这里插槽(slot)的全部用法基本就已经介绍完啦。如果感觉对你有用的话赶紧点赞收藏吧！

（学习视频分享：web前端开发、编程基础视频）

以上がスロットとは何ですか? Vue3 でスロットを使用する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。