スコープスロットを使用するとデータをスロットに渡すことができることはわかっていますが、スロットからデータを戻すにはどうすればよいですか？
スロットにメソッドを渡し、スロット内のメソッドを呼び出します。スロットが親コンポーネントと同じコンテキスト（またはスコープ）を共有しているため、イベントを発行できないと思います。
// Parent.vue
<template>
<Child>
<template #default="{ clicked }">
<button @click="clicked">
Click this button
</button>
</template>
</Child>
</template>// Child.vue
<template>
<div>
<!-- 将“handleClick” 作为 “clicked” 传递到我们的 slot -->
<slot :clicked="handleClick" />
</div>
</template>この記事では、それがどのように機能するか、および以下を紹介します。
- スロットから親に放出
- スロットが親コンポーネントとスコープを共有する場合、それはどういう意味ですか
- スロットから祖父コンポーネントに放出する
- メソッドを使用してスロットから通信する方法の詳細
スロットから親に放出
次に、Parentコンポーネントの内容を確認します。
// Parent.vue
<template>
<Child>
<button @click="">
Click this button
</button>
</Child>
</template>
子コンポーネントのスロットにボタンがあります。ボタンがクリックされたら、Parentコンポーネント内のメソッドを呼び出す必要があります。
ボタンがスロットになく、親コンポーネントの子コンポーネントに直接ある場合、コンポーネントのメソッドにアクセスできます。
// Parent.vue
<template>
<button @click="handleClick">
Click this button
</button>
</template>ボタンコンポーネントがスロットにある場合も同じです。
/ Parent.vue
<template>
<Child>
<button @click="handleClick">
Click this button
</button>
</Child>
</template>これが可能なのは、スロットが親コンポーネントと同じスコープを共有しているためです。
スロットとテンプレートのスコープ
テンプレートスコープ：テンプレート内のすべてのコンテンツは、コンポーネントで定義されているすべてのコンテンツにアクセスできます。
これには、すべての要素、すべてのスロット、およびすべてのスコープスロットが含まれます。
したがって、ボタンがテンプレートのどこに配置されていても、handleClickメソッドにアクセスできます。
一見奇妙に思えるかもしれませんが、これがスロットがわかりにくい理由の1つです。スロットは最終的に子コンポーネントの子コンポーネントとしてレンダリングされますが、子コンポーネントとスコープを共有しません。代わりに、親コンポーネントの子コンポーネントとして機能します。
スロットは祖父コンポーネントにデータを送信します
スロットから祖父コンポーネントにデータを送信する場合、通常の方法は$ emitメソッドを使用することです。
// Parent.vue
<template>
<Child>
<button @click="$emit('click')">
Click this button
</button>
</Child>
</template>このスロットは親コンポーネントと同じテンプレートスコープを共有しているため、ここで$ emitを呼び出すと、親コンポーネントからイベントが発行されます。
スロットからサブコンポーネントを送り返します
子コンポーネントとの通信はどうですか？
子ノードからスロットにデータを渡す方法を知っています
// Child.vue
<template>
<div>
<slot :data="data" />
</div>
</template>そして、スコープ内のスロットでそれを使用する方法：
// Parent.vue
<template>
<Child>
<template #default="{ data }">
{
{ data }}
</template>
</Child>
</template>データを渡すだけでなく、スコープスロットにメソッドを渡すこともできます。これらのメソッドを正しい方法で接続すると、それを使用して子コンポーネントと通信できます。
// Parent.vue
<template>
<Child>
<template #default="{ clicked }">
<button @click="clicked">
Click this button
</button>
</template>
</Child>
</template>// Child.vue
<template>
<div>
<!-- Pass `handleClick` as `clicked` into our slot -->
<slot :clicked="handleClick" />
</div>
</template>ボタンがクリックされるたびに、子コンポーネントのhandleClickメソッドが呼び出されます