Vueドキュメントのスロット内部値転送関数の実装方法

Vue は、Web インターフェイスを構築するためのオープンソース JavaScript フレームワークです。 Vue の重要な機能は、コンポーネント間の通信やイベント配信などの機能を簡単に実装できるスロットの使用です。この記事では、Vue スロットの導入に基づいて、スロット内に値転送関数を実装する方法について説明します。

Vue スロットの基本

Vue のスロットは、親コンポーネントのコンテンツを子コンポーネントに渡すためのメカニズムです。これにより、親コンポーネントでいくつかのコンテンツを定義し、そのコンテンツを子コンポーネントで使用することができます。 Vue のスロットは、名前付きスロットとデフォルト スロットに分類できます。

複数の名前付きスロットを定義し、名前で参照できます。以下は、名前付きスロットの例です。

<template>
  <div>
    <slot name="header"></slot>
    <div>
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

上の例では、先頭と末尾が名前付きスロットで、名前のないスロットがデフォルト スロットである 3 つのスロットを定義しました。

このコンポーネントを親コンポーネントで使用する場合、コンテンツを次のスロットに渡すことができます:

<template>
  <my-component>
    <template v-slot:header>
      <h1>This is header</h1>
    </template>
    <p>This is content.</p>
    <template v-slot:footer>
      <h1>This is footer</h1>
    </template>
  </my-component>
</template>

上の例では、v-slot ディレクティブを使用してコンテンツをスロットに渡します。 。スロットの名前を指定する必要があります。ここでは名前付きスロットの書き込みメソッドを使用します。

Vue スロットは値を渡します

Vue のスロットは、次の例のようにデータを渡すために使用できます:

<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

上の例では、メッセージに name 変数を使用しました。そしてそれをスロットに渡します。

親コンポーネントでは、次のようにスロットを使用できます:

<template>
  <my-component>
    <template v-slot="slotProps">
      <div>{{ slotProps.message }}</div>
    </template>
  </my-component>
</template>

上の例では、v-slot のデフォルトの書き込みメソッドを使用し、スロット内のコンテンツを slotProps に割り当てました。変数。次に、この変数の値をスロットにレンダリングします。

スロット内での値受け渡し関数の実装

より複雑な関数を実装するには、スロット内で値受け渡し関数を定義する必要がある場合があります。たとえば、スロットに渡されたデータを処理する関数を定義できます。

function handleMessage(message) {
  // 处理消息
}

この関数をスロットに定義し、子コンポーネントに渡す必要があります。以下に例を示します。

<template>
  <div>
    <slot :handle-message="handleMessage"></slot>
  </div>
</template>

上の例では、handleMessage という関数を追加し、それをスロットに渡しました。

次に、親コンポーネントのスロットを使用します。

<template>
  <my-component>
    <template v-slot="slotProps">
      <button @click="slotProps.handleMessage('This is a message.')">Click me</button>
    </template>
  </my-component>
</template>

上の例では、スロットにボタンをレンダリングし、クリック イベントをバインドします。このボタンをクリックすると、メッセージが handleMessage 関数に渡されます。

最後に、サブコンポーネントでスロットを定義し、渡された関数を呼び出す必要があります。

<template>
  <div>
    <slot :message="message" :handle-message="handleMessage"></slot>
  </div>
</template>

上の例では、スロット内のメッセージと関数を message 変数と handleMessage 変数に割り当てます。が追加されます。次に、子コンポーネントでこの関数を呼び出すことができます。

mounted() {
  this.$slots.default[0].context.handleMessage('This is a message.');
},

上記の例では、$slots 属性を使用してスロットの内容を取得しました。次に、handleMessage 関数を呼び出してメッセージを渡しました。

概要

Vue では、スロットはコンポーネント間の通信とデータ転送を容易にする非常に便利なメカニズムです。データと関数をスロットに渡し、親コンポーネントと子コンポーネントでそれらを操作できます。スロット内で値を渡す関数を実装するには、データを処理してスロットに渡す関数を定義する必要があります。次に、サブコンポーネントでこの関数を呼び出して、データ処理関数を完了します。

以上がVueドキュメントのスロット内部値転送関数の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。