在 Vue 中，如何從插槽中發出資料

大家都說簡歷沒專案寫，我就幫大家找了乙個專案，還附贈【搭建教程】。

**部署後可能存在的bug沒法實時知道，事後為了解決這些bug，花了大量的時間進行log 除錯，這邊順便給大家推薦乙個好用的bug監控工具 fundebug。

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

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

// parent.vue click this button

// child.vue

現在看一下parent元件的內容：

// parent.vue click this button

我們在child元件的插槽內有乙個button。單擊該按鈕時，我們要在parent元件內部呼叫乙個方法。

如果button不在插槽中，而是直接在parent元件的子元件中，則我們可以訪問該元件上的方法：

// parent.vue click this button

當該button元件位於插槽內時，也是如此：

/ parent.vue click this button

之所以可行，是因為該插槽與parent元件共享相同的作用域。

模板作用域：模板內部的所有內容都可以訪問元件上定義的所有內容。

這包括所有元素，所有插槽和所有作用域插槽。

因此，無論該按鈕在模板中位於何處，都可以訪問handleclick方法。

乍一看，這可能有點奇怪，這也是為什麼插槽很難理解的原因之一。插槽最終渲染為child元件的子元件，但它不與child元件共享作用域。相反，它充當parent元件的子元件。

如果要從插槽把資料傳送到祖父元件，常規的方式是使用的$emit方法：

// parent.vue click this button

因為該插槽與parent元件共享相同的模板作用域，所以在此處呼叫$emit將從parent元件發出事件。

與child元件通訊又如何呢？

我們知道如何將資料從子節點傳遞到槽中

// child.vue

以及如何在作用域內的插槽中使用它：

// parent.vue
}

除了傳遞資料，我們還可以將方法傳遞到作用域插槽中。如果我們以正確的方式連線這些方法，則可以使用它來與child元件通訊：

// parent.vue click this button

// child.vue

每當單擊按鈕時，就會呼叫child元件中的handleclick方法。

**部署後可能存在的bug沒法實時知道，事後為了解決這些bug，花了大量的時間進行log 除錯，這邊順便給大家推薦乙個好用的bug監控工具 fundebug。

原文：

在 Vue 中是使用插槽

先寫一段簡單的 dell vue.component child template hello let vm new vue 這種寫法有兩個問題 p標籤外面會有一層div，這個div是無法去掉的，有人會想，能不能用template代替，其實是不可以的，在這裡模版站位符是不能用的。如果content傳...

在 Vue 中，如何從插槽中發出資料

在 Vue 中是使用插槽

在 Vue 中是使用插槽

在 Vue 中是使用插槽

相關推薦