代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
我们知道使用作用域插槽可以将数据传递到插槽中,但是如何从插槽传回来呢?
将一个方法传递到我们的插槽中,然后在插槽中调用该方法。我信无法发出事件,因为插槽与父组件共享相同的上下文(或作用域)。
// Parent.vue
// Child.vue
在本文中,我们将介绍其工作原理,以及:
现在看一下Parent组件的内容:
// Parent.vue
我们在 Child 组件的插槽内有一个button 。单击该按钮时,我们要在Parent 组件内部调用一个方法。
如果 button 不在插槽中,而是直接在Parent组件的子组件中,则我们可以访问该组件上的方法:
// Parent.vue
当该 button 组件位于插槽内时,也是如此:
/ Parent.vue
之所以可行,是因为该插槽与 Parent 组件共享相同的作用域。
模板作用域:模板内部的所有内容都可以访问组件上定义的所有内容。
这包括所有元素,所有插槽和所有作用域插槽。
因此,无论该按钮在模板中位于何处,都可以访问handleClick方法。
乍一看,这可能有点奇怪,这也是为什么插槽很难理解的原因之一。插槽最终渲染为Child 组件的子组件,但它不与Child 组件共享作用域。相反,它充当Parent 组件的子组件。
如果要从插槽把数据发送到祖父组件,常规的方式是使用的$emit方法:
// Parent.vue
因为该插槽与Parent 组件共享相同的模板作用域,所以在此处调用$emit将从Parent组件发出事件。
与Child 组件通讯又如何呢?
我们知道如何将数据从子节点传递到槽中
// Child.vue
以及如何在作用域内的插槽中使用它:
// Parent.vue
{{ data }}
除了传递数据,我们还可以将方法传递到作用域插槽中。如果我们以正确的方式连接这些方法,则可以使用它来与Child组件通信:
// Parent.vue
// Child.vue
每当单击按钮时,就会调用Child组件中的handleClick方法。
作者:Michael Thiessen 译者:前端小智 来源:medium 原文:https://stackoverflow.com/questions/50942544/emit-event-from-content-in-slot-to-parent/50943093
页面更新:2024-03-20
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号