vue3 如何从槽发出数据

如何从槽发出数据

您知道如何通过使用范围限定的插槽将数据传递到插槽中，但是如何返回通信呢?

你将一个方法传递到槽中，然后在槽中调用那个方法。您不能发出事件，因为插槽与父组件共享相同的上下文(或作用域)。

// Parent.vue

Click this button

// Child.vue

在这篇文章中，我们将涵盖为什么这个工作，以及:

从槽发送到父节点

当一个槽与父线程共享作用域时意味着什么

从槽发送到祖父组件

更深入地了解如何使用方法从槽中返回通信

从槽发送到父节点

现在让我们来看看父组件:

// Parent.vue

Click this button

在子组件的槽内有一个按钮。当按钮被单击时，我们希望调用父组件内部的一个方法。如果按钮不在插槽中，而是直接作为父组件的子组件，我们可以访问组件上的方法:

// Parent.vue

Click this button

当按钮组件位于插槽内时，情况也是如此:

// Parent.vue

Click this button

这之所以有效，是因为槽与父组件共享相同的作用域。

插槽和模板作用域

我以前讨论过Vue组件中的作用域，但这是一种新的作用域类型，我还没有讨论过它。

(我将其称为“模板范围”，我将需要在某一时刻对这篇文章进行后续工作!)

模板作用域就是这样的:模板内的所有内容都可以访问在组件上定义的所有内容。

这包括所有元素、所有插槽和所有作用域插槽。

无论按钮位于模板中的哪个位置，它都能访问handleClick方法。

乍一看，这可能有点奇怪，这也是为什么插槽很难理解的原因之一。槽最终被呈现为子组件的子组件，但它不与子组件共享作用域。相反，它充当父组件的子组件。

我在这篇文章中探讨了这个想法——老虎机假装不是什么东西。

从一个槽发送到祖父节点

如果我们想要从槽发射到祖父组件，我们使用常规的$emit方法:

// Parent.vue

Click this button

因为槽与父组件共享相同的模板作用域，所以在这里调用$emit将从父组件发出一个事件。

从一个槽里发射回孩子

那么返回到子组件的通信呢?

我们刚刚看到，在槽中调用$emit将从父组件向祖父组件发送一个事件，因此这已被排除。

但是我们知道如何将数据从child传递到槽中:

// Child.vue

以及如何在作用域槽内使用它:

// Parent.vue

{{ data }}

除了传递数据，我们还可以将方法传递到作用域槽中。如果我们以正确的方式连接这些方法，我们可以使用它来与子组件通信:

// Parent.vue

Click this button

// Child.vue