Vue 中如何從插槽中發出數據

作者：前端小智 2020-08-10 08:30:35

代碼部署后可能存在的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> 
  <Child> 
    <button @click=""> 
      Click this button 
    </button> 
  </Child> 
</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方法。

作者：Michael Thiessen 譯者：前端小智來源：medium 原文：https://stackoverflow.com/questions/50942544/emit-event-from-content-in-slot-to-parent/50943093

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。

責任編輯：武曉燕來源：大遷世界

Vue 數據插槽