作者：Michael Thiessen
译者：前端小智
起源：medium
点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

咱们晓得应用作用域插槽能够将数据传递到插槽中，然而如何从插槽传回来呢？

将一个办法传递到咱们的插槽中，而后在插槽中调用该办法。 我信无奈收回事件，因为插槽与父组件共享雷同的上下文（或作用域）。

// Parent.vue<template>  <Child>    <template #default="{ clicked }">      <button @click="clicked">        Click this button      </button>    </template>  </Child></template>
// Child.vue<template>  <div>    <!-- 将“handleClick” 作为 “clicked” 传递到咱们的 slot -->    <slot :clicked="handleClick" />  </div></template>

在本文中，咱们将介绍其工作原理，以及：

  • 从插槽到父级的 emit
  • 当一个槽与父组件共享作用域时意味着什么
  • 从插槽到祖父组件的 emit
  • 更深刻地理解如何应用办法从插槽通信回来

从插槽到父级的 emit

当初看一下Parent组件的内容：

// Parent.vue<template>  <Child>    <button @click="">      Click this button    </button>  </Child></template>

咱们在 Child 组件的插槽内有一个button 。 单击该按钮时，咱们要在Parent 组件外部调用一个办法。

如果 button 不在插槽中，而是间接在Parent组件的子组件中，则咱们能够拜访该组件上的办法：

// Parent.vue<template>  <button @click="handleClick">    Click this button  </button></template>

当该 button 组件位于插槽内时，也是如此：

/ Parent.vue<template>  <Child>    <button @click="handleClick">      Click this button    </button>  </Child></template>

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

插槽和模板作用域

模板作用域：模板外部的所有内容都能够拜访组件上定义的所有内容。

这包含所有元素，所有插槽和所有作用域插槽。

因而，无论该按钮在模板中位于何处，都能够拜访handleClick办法。

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

插槽向祖父组件发送数据

如果要从插槽把数据发送到祖父组件，惯例的形式是应用的$emit办法：

// Parent.vue<template>  <Child>    <button @click="$emit('click')">      Click this button    </button>  </Child></template>

因为该插槽与Parent 组件共享雷同的模板作用域，所以在此处调用$emit将从Parent 组件收回事件。

从插槽发回子组件

与Child 组件通信又如何呢？

咱们晓得如何将数据从子节点传递到槽中

// Child.vue<template>  <div>    <slot :data="data" />  </div></template>

以及如何在作用域内的插槽中应用它：

// Parent.vue<template>  <Child>    <template #default="{ data }">      {{ data }}    </template>  </Child></template>

除了传递数据，咱们还能够将办法传递到作用域插槽中。 如果咱们以正确的形式连贯这些办法，则能够应用它来与Child组件通信：

// 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>

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

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

原文：https://stackoverflow.com/que...

交换

文章每周继续更新，能够微信搜寻【大迁世界 】第一工夫浏览，回复【福利】有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送Star。