Vue中slots如何发送数据

代码部署后可能出现的bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。这里顺便推荐一个好用的bug监控工具Fundebug。我们知道使用作用域槽我们可以将数据传递到槽中，但是我们如何从槽中传回数据呢？将方法传递到我们的插槽中，然后在插槽中调用该方法。我相信事件无法发出，因为插槽与父组件共享相同的上下文（或范围）。//Parent.vue//Child.vue在本文中，我们将介绍它是如何工作的，并且：从插槽向父级发送当插槽与父级共享作用域时意味着什么返回从插槽向父级发送现在查看父组件的内容：//Parent.vue我们在Child组件的插槽内有一个按钮。单击按钮时，我们要调用Parent组件内的方法。如果按钮不在插槽中，而是直接在Parent组件的子组件中，我们可以访问该组件上的方法：//Parent.vue当按钮组件在slot中时，同理：/Parent.vue起作用是因为插槽与Parent组件共享相同的范围。插槽和模板范围模板范围：模板内的所有内容都可以访问组件上定义的所有内容。这包括所有元素、所有插槽和所有作用域插槽。因此无论按钮位于模板中的什么位置，都可以访问handleClick方法。乍一看，这似乎有点奇怪，这也是插槽难以理解的原因之一。插槽最终呈现为子组件的子组件，但它不与子组件共享范围。相反，它充当父组件的子组件。插槽将数据发送到祖父组件。如果要从slot向祖父组件发送数据，常规方式是使用$emit方法：//Parent.vue因为这个槽与父组件共享相同的模板范围，所以在这里调用$emit会从父组件发出事件。如何将子组件从插槽发送回来与子组件通信？我们知道如何将数据从子节点传递到槽//Child.vue以及如何在作用域槽中使用它：//Parent.vue除了传递数据，我们还可以传递方法到作用域插槽。如果我们以正确的方式连接这些方法，我们可以使用它与子组件通信：//Parent.vue//Child.vue每当点击按钮时，都会调用Child组件中的handleClick方法。作者：MichaelThiessen译者：前端小智来源：medium原文：https://stackoverflow.com/questions/50942544/emit-event-from-content-in-slot-to-parent/50943093本文转载自微信公众号“盛世行”，可通过以下二维码关注。转载本文请联系大千世界公众号。