作者：MichaelThiessen译者：前端小智来源：Medium喜欢再看，微信搜索【大千世界】关注这个没有大厂背景，但是有一个分享积极态度的人。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。我们知道使用作用域槽我们可以将数据传递到槽中，但是我们如何从槽中传回数据呢？将方法传递到我们的插槽中，然后在插槽中调用该方法。我相信事件无法发出，因为插槽与父组件共享相同的上下文（或范围）。//Parent.vue点击这个按钮//Child.vue
在这文章中，我们将介绍它是如何工作的，以及：从插槽发出到父级当插槽与父级共享作用域时意味着什么vueClickthisbutton我们在Child组件的插槽中有一个按钮。单击按钮时，我们要调用Parent组件内的方法。如果按钮不在插槽中，而是直接在Parent组件的子组件中，我们可以访问该组件上的方法：//Parent.vueClickthisbutton当按钮组件在slot里面时也是如此：/Parent.vue点击这个按钮/template>之所以有效，是因为插槽与父组件共享相同的范围。插槽和模板范围模板范围：模板内的所有内容都可以访问组件上定义的所有内容。这包括所有元素、所有插槽和所有作用域插槽。因此无论按钮位于模板中的什么位置，都可以访问handleClick方法。乍一看，这似乎有点奇怪，这也是插槽难以理解的原因之一。插槽最终呈现为子组件的子组件，但它不与子组件共享范围。相反，它充当父组件的子组件。slot向祖父组件发送数据如果要从slot向祖父组件发送数据，常规方式是使用$emit方法：//Parent.vueClickthisbutton因为这个槽与Parent组件共享相同的模板作用域，所以这里调用$emit会从Parent组件发出事件。将子组件从套接字发送回来与子组件通信怎么样？我们知道如何将数据从子节点传递到槽中//Child.vue
以及如何在作用域槽中使用它：//Parent.vue{{data}}除了传递数据，我们还可以传递传入的方法作用域插槽。如果我们以正确的方式连接这些方法，我们可以使用它与子组件通信：//Parent.vue单击此按钮//Child.vue
每当单击按钮时，都会调用Child组件中的handleClick方法。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://stackoverflow.com/que...每周更新交流文章。微信搜索【大千世界】即可第一时间阅读，回复【福利】还有很多前端视频等着你。本文在GitHub上https://github.com/qq449245884/xiaozhi已收录，欢迎Star。
