在工作中BUG的出現是在所難免的，但是在寫代碼的時候沒法實時發(fā)現BUG，等事后再去解決BUG，還得花很多時間去進行log調試，這里給大家推薦一個不錯的BUG監(jiān)控工具：Fundebug。
我們知道使用作用域插槽可以將數據傳遞到插槽中，但是如何從插槽傳回來呢？
（推薦教程：Vue 1教程）
將一個方法傳遞到我們的插槽中，然后在插槽中調用該方法。無法發(fā)出事件，因為插槽與父組件共享相同的上下文（或作用域）。
// 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 組件共享相同的作用域。
（推薦教程：Vue 2教程）
插槽和模板作用域
模板作用域：模板內部的所有內容都可以訪問組件上定義的所有內容。
這包括所有元素，所有插槽和所有作用域插槽。
因此，無論該按鈕在模板中位于何處，都可以訪問handleClick方法。
乍一看，這可能有點奇怪，這也是為什么插槽很難理解的原因之一。插槽最終渲染為Child 組件的子組件，但它不與Child 組件共享作用域。相反，它充當Parent 組件的子組件。
插槽向祖父組件發(fā)送數據
如果要從插槽把數據發(fā)送到祖父組件，常規(guī)的方式是使用的$emit方法：
// Parent.vue <template> <Child> <button @click="$emit('click')"> Click this button </button> </Child> </template>
因為該插槽與Parent 組件共享相同的模板作用域，所以在此處調用$emit將從Parent組件發(fā)出事件。
從插槽發(fā)回子組件
與Child 組件通訊又如何呢？
我們知道如何將數據從子節(jié)點傳遞到槽中
// 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方法。
（推薦微課：Vue 2.x 微課）
以上就是關于在Vue中插槽是怎么發(fā)送數據的詳細內容了，希望對大家有所幫助。
原文：stackoverflow.com/questions/50942544/emit-event-from-content-in-slot-to-parent/50943093
