Vue 中如何从插槽中发出数据

开发 测试
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

[[336881]]

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

我们知道使用作用域插槽可以将数据传递到插槽中,但是如何从插槽传回来呢?

将一个方法传递到我们的插槽中,然后在插槽中调用该方法。我信无法发出事件,因为插槽与父组件共享相同的上下文(或作用域)。

  1. // Parent.vue 
  2. <template> 
  3.   <Child> 
  4.     <template #default="{ clicked }"
  5.       <button @click="clicked"
  6.         Click this button 
  7.       </button> 
  8.     </template> 
  9.   </Child> 
  10. </template> 
  1. // Child.vue 
  2. <template> 
  3.   <div> 
  4.     <!-- 将“handleClick” 作为 “clicked” 传递到我们的 slot --> 
  5.     <slot :clicked="handleClick" /> 
  6.   </div> 
  7. </template> 

在本文中,我们将介绍其工作原理,以及:

  • 从插槽到父级的 emit
  • 当一个槽与父组件共享作用域时意味着什么
  • 从插槽到祖父组件的 emit
  • 更深入地了解如何使用方法从插槽通讯回来

从插槽到父级的 emit

现在看一下Parent组件的内容:

  1. // Parent.vue 
  2. <template> 
  3.   <Child> 
  4.     <button @click=""
  5.       Click this button 
  6.     </button> 
  7.   </Child> 
  8. </template> 

我们在 Child 组件的插槽内有一个button 。单击该按钮时,我们要在Parent 组件内部调用一个方法。

如果 button 不在插槽中,而是直接在Parent组件的子组件中,则我们可以访问该组件上的方法:

  1. // Parent.vue 
  2. <template> 
  3.   <Child> 
  4.     <button @click=""
  5.       Click this button 
  6.     </button> 
  7.   </Child> 
  8. </template> 

当该 button 组件位于插槽内时,也是如此:

  1. / Parent.vue 
  2. <template> 
  3.   <Child> 
  4.     <button @click="handleClick"
  5.       Click this button 
  6.     </button> 
  7.   </Child> 
  8. </template> 

之所以可行,是因为该插槽与 Parent 组件共享相同的作用域。

插槽和模板作用域

模板作用域:模板内部的所有内容都可以访问组件上定义的所有内容。

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

因此,无论该按钮在模板中位于何处,都可以访问handleClick方法。

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

插槽向祖父组件发送数据

如果要从插槽把数据发送到祖父组件,常规的方式是使用的$emit方法:

  1. // Parent.vue 
  2. <template> 
  3.   <Child> 
  4.     <button @click="$emit('click')"
  5.       Click this button 
  6.     </button> 
  7.   </Child> 
  8. </template> 

因为该插槽与Parent 组件共享相同的模板作用域,所以在此处调用$emit将从Parent 组件发出事件。

从插槽发回子组件

与Child 组件通讯又如何呢?

我们知道如何将数据从子节点传递到槽中

  1. // Child.vue 
  2. <template> 
  3.   <div> 
  4.     <slot :data="data" /> 
  5.   </div> 
  6. </template> 

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

  1. // Parent.vue 
  2. <template> 
  3.   <Child> 
  4.     <template #default="{ data }"
  5.       {{ data }} 
  6.     </template> 
  7.   </Child> 
  8. </template> 

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

  1. // Parent.vue 
  2. <template> 
  3.   <Child> 
  4.     <template #default="{ clicked }"
  5.       <button @click="clicked"
  6.         Click this button 
  7.       </button> 
  8.     </template> 
  9.   </Child> 
  10. </template> 
  1. // Child.vue 
  2. <template> 
  3.   <div> 
  4.     <!-- Pass `handleClick` as `clicked` into our slot --> 
  5.     <slot :clicked="handleClick" /> 
  6.   </div> 
  7. </template> 

每当单击按钮时,就会调用Child组件中的handleClick方法。

 

作者:Michael Thiessen 译者:前端小智 来源:medium 原文:https://stackoverflow.com/questions/50942544/emit-event-from-content-in-slot-to-parent/50943093

本文转载自微信公众号「 大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2020-05-25 17:03:47

Vue嵌套插槽开发

2021-05-08 07:37:32

Vue 命名插槽

2012-03-16 16:43:51

大数据业务分析IBM论坛2012

2024-06-03 10:00:51

Vue 3语法插槽

2009-07-20 15:38:31

ASP.NET 2.0发送电子邮件

2021-09-03 08:23:21

Vue 插槽子组件

2024-03-18 10:15:00

HTTPNode.jsAPI

2021-12-29 07:51:21

Vue3 插件Vue应用

2022-07-15 08:45:07

slotVue3

2014-11-04 09:18:33

安全策略安全管理威胁情报

2022-11-07 11:16:30

大数据数据仓库Hadoop

2023-05-25 14:06:45

ChatGPT人工智能工具

2021-04-14 07:52:00

Vue 作用域插槽

2023-06-28 15:00:22

CDO数据管理

2023-03-29 08:52:58

视觉Vue组件库

2022-05-10 08:17:03

goroutine泄漏

2023-01-05 16:02:40

Linux扬声器

2020-11-17 10:50:04

加密货币大数据分析大数据

2013-08-07 10:04:37

MySQL数据恢复

2010-04-20 10:12:42

OraclePL
点赞
收藏

51CTO技术栈公众号