我們知道使用作用域插槽可以將資料傳遞到插槽中，但是如何從插槽傳回來呢？

將一個方法傳遞到我們的插槽中，然後在插槽中呼叫該方法。 我信無法發出事件，因為插槽與父元件共享相同的上下文（或作用域）。

// 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 元件發出事件。

廣州vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

從插槽發回子元件

與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方法