Vue におけるスロットの役割

Vue でのスロットの役割には特定のコード例が必要です

人気の JavaScript フレームワークとして、Vue.js は多くの強力な機能を提供しますが、その中の 1 つはスロットです。スロットは、親コンポーネントが子コンポーネントにコンテンツを渡すことを可能にするメカニズムであり、再利用可能なコンポーネントを構築する際の柔軟性と拡張性が向上します。この記事では、Vue におけるスロットの役割を紹介し、具体的なコード例をいくつか示します。

Vue では、コンポーネントに 1 つ以上のスロットを含めることができます。スロットには親コンポーネントのコンテンツを入れることができ、動的なコンポーネントのネストとコンテンツの配布が可能になります。

親コンポーネントでは、<slot></slot> タグを使用してスロットを定義できます。スロットは任意の HTML コンテンツを受け入れ、そのコンテンツを子コンポーネントの slot 属性を通じて子コンポーネントに渡すことができます。

次は簡単な例です:

// 父组件
<template>
  <div>
    <h1>我是父组件</h1>
    <slot></slot>
  </div>
</template>

// 子组件
<template>
  <div>
    <h2>我是子组件</h2>
  </div>
</template>

上の例では、親コンポーネントは <slot></slot> を使用してスロットを定義します。サブコンポーネントにはタイトル (<h2>I am the subcomponent</h2>) のみが含まれます。

これで、親コンポーネントを使用して HTML コンテンツの一部をラップし、このコンテンツを子コンポーネントのスロットに渡すことができます。例:

<template>
  <div>
    <parent-component>
      <h3>我是插槽的内容</h3>
    </parent-component>
  </div>
</template>

上記の例では、<h3>I am the content of the slot</h3> が親コンポーネントのスロットに渡されます。親コンポーネントは、このコンテンツを子コンポーネント内にネストします。

Vue は、デフォルトのスロットに加えて、名前付きスロットの機能も提供します。名前付きスロットを使用すると、親コンポーネントの特定のスロットをコンテンツ配布に使用できます。 name 属性をスロットに追加することで、名前付きスロットを作成できます。

以下は名前付きスロットの例です:

// 父组件
<template>
  <div>
    <h1>我是父组件</h1>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

// 子组件
<template>
  <div>
    <h2>我是子组件</h2>
    <slot name="header"></slot>
  </div>
</template>

上の例では、親コンポーネントと子コンポーネントの両方に名前付きスロットを定義します<slot name= 「ヘッダー」></スロット>。親コンポーネントでは、<slot name="header"></slot> および <slot></slot> ## を通じて、指定されたスロットを埋めることができます。 # デフォルトのスロットを埋めます。

slot 属性を通じて、コンテンツがどのスロットに配布されるかを指定できます。

<template>
  <div>
    <parent-component>
      <template slot="header">
        <h3>我是具名插槽的内容</h3>
      </template>
      <h4>我是默认插槽的内容</h4>
    </parent-component>
  </div>
</template>

I は名前付きスロットのコンテンツです

I はデフォルト スロットのコンテンツです

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