vue3 如何从槽发出数据
如何从槽发出数据
您知道如何通过使用范围限定的插槽将数据传递到插槽中，但是如何返回通信呢?
你将一个方法传递到槽中，然后在槽中调用那个方法。您不能发出事件，因为插槽与父组件共享相同的上下文(或作用域)。
// 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>在这篇文章中，我们将涵盖为什么这个工作，以及:
- 从槽发送到父节点
- 当一个槽与父线程共享作用域时意味着什么
- 从槽发送到祖父组件
- 更深入地了解如何使用方法从槽中返回通信
从槽发送到父节点
现在让我们来看看父组件:
// Parent.vue
<template>
<Child>
<button @click="">
Click this button
</button>
</Child>
</template>在子组件的槽内有一个按钮。当按钮被单击时，我们希望调用父组件内部的一个方法。如果按钮不在插槽中，而是直接作为父组件的子组件，我们可以访问组件上的方法:
// Parent.vue
<template>
<button @click="handleClick">
Click this button
</button>
</template>当按钮组件位于插槽内时，情况也是如此:
// Parent.vue
<template>
<Child>
<button @click="handleClick">
Click this button
</button>
</Child>
</template>这之所以有效，是因为槽与父组件共享相同的作用域。
插槽和模板作用域
我以前讨论过Vue组件中的作用域，但这是一种新的作用域类型，我还没有讨论过它。
(我将其称为“模板范围”，我将需要在某一时刻对这篇文章进行后续工作!)
模板作用域就是这样的:模板内的所有内容都可以访问在组件上定义的所有内容。
这包括所有元素、所有插槽和所有作用域插槽。
无论按钮位于模板中的哪个位置，它都能访问handleClick方法。
乍一看，这可能有点奇怪，这也是为什么插槽很难理解的原因之一。槽最终被呈现为子组件的子组件，但它不与子组件共享作用域。相反，它充当父组件的子组件。
我在这篇文章中探讨了这个想法——老虎机假装不是什么东西。
从一个槽发送到祖父节点
如果我们想要从槽发射到祖父组件，我们使用常规的$emit方法:
// Parent.vue
<template>
<Child>
<button @click="$emit('click')">
Click this button
</button>
</Child>
</template>因为槽与父组件共享相同的模板作用域，所以在这里调用$emit将从父组件发出一个事件。
从一个槽里发射回孩子
那么返回到子组件的通信呢?
我们刚刚看到，在槽中调用$emit将从父组件向祖父组件发送一个事件，因此这已被排除。
但是我们知道如何将数据从child传递到槽中:
// 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>本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-09-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录