Vue.js slots: 為什么你需要它們？

KavenFan 發布于2019-08-21 17:51 / 1207人閱讀

摘要：你創建了這樣一個組件使用方法如下這樣就可以正常運行了。上述代碼可能會出現一些問題，如果需要更多按鈕更多交互等等這些情況，怎么辦幸好，提供了一個更簡潔的解決方案具名。

也許你已經看過了Vue.js slots的文檔。我對這個功能從“為什么你可能需要它”到“沒有它我怎么可能工作”的態度轉變非常快。
雖然文檔已經解釋了它的概念，但是這里有一個關于slots怎么改進應用程序代碼庫的真實例子。
在我看來，slots是vue最有用和最有趣的特性之一。雖然這是web組件所推薦的標準，但是我不知道有其他框架已經實現了這一特性。解釋slots的作用很簡單，但是很難解釋它為什么有用（如果不使用“可組合性”這個術語），所以我要給你一個使用例子。

假設你的app有很多表單，表單包含幾個部分：

表單頭部：包含關于表單的信息

表單元素：供用戶輸入

按鈕

現在你想要把表單抽象為一個獨立組件。你那些使用react和angular的同事告訴你，你需要使用類似React的組合vs繼承或者Angular1的Transclude這樣的特性，于是你找到了slots的文檔。

你創建了這樣一個組件：



  {{ title }}

使用方法如下：

這樣就可以正常運行了。可是，產品告訴你，一個特定的表單需要一個文本塊來獲得幫助信息的標題，按鈕名要改為“Request”。這超出了“children”能做的范圍。



  {{ title }}
  {{ helpMessage }}

上述代碼可能會出現一些問題，如果需要更多按鈕、更多交互等等這些情況，怎么辦？幸好，vuejs提供了一個更簡潔的解決方案：具名slots。于是，你把代碼改成下面這樣：



  {{ title }}

使用方法：



  
    Please ask your manager before requesting hardware.

在我看來，關鍵思想是：

將slots當作傳遞給子組件的屬性。就像傳遞字符串、整數和對象，而slots是傳遞一個子dom樹，讓子組件可以在任何需要的地方使用。

使用slots的其他場景：

通用的模態窗

類似bootstrap的面板和自定義內容這樣的事情

使用slots的更多優點：

子組件用于樣式和展示，業務邏輯都保留在父元素中。

如果沒有傳遞內容給slots，就不會展示東西。這讓你可以很好地復用它們，并且只在你想要的slots中傳遞。

云服務器 GPU云服務器 sql server 有哪幾種系統數據庫?它們的作用是什么? Vue.js vue.js 屬性大數據數據很多你要什么

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90109.html

Vue.js 的注意事項與技巧

摘要：需要注意的是，同樣的行為也適用于。這意味著我們必須重新綁定每個事件。組件的由調用它的父組件提供，這意味著所有事件都應該與父組件相關聯。原文鏈接：Vue.js — Considerations and Tricks showImg(https://segmentfault.com/img/bVbqHOd?w=1600&h=1599); Vue.js 是一個很棒的框架。然而，當你開始構建...

lsxiao 2019-08-26 13:39 評論0 收藏0
Vue.js非常重要之組件

摘要：它們之間必然需要相互通信父組件要給子組件傳遞數據，子組件需要將它內部發生的事情告知給父組件。父組件通過向下傳遞數據給子組件，子組件通過給父組件發送消息。這是由使用的父組件決定的。 Vue.js的組件注冊組件全局注冊要注冊一個全局組件，你可以使用 Vue.component(tagName, options)。例如： Vue.component(my-component, { ...

ysl_unh 2019-08-21 16:16 評論0 收藏0
Vue.js-Render函數

摘要：函數通過參數來創建虛擬，結構精簡。其中，訪問的用法，使用場景集中在函數。使用代替模板功能在函數中，不再需要內置的指令，比如。方法時快速改變數組結構，返回一個新數組。學習筆記：Render函數 Render函數 Vue2與Vue1最大的區別就在于Vue2使用了虛擬DOM來更新DOM節點，提升渲染性能。 Vue2與Vue1最大的區別就在于Vue2使用了虛擬DOM來更新DOM節點，提升...

ccj659 2019-08-23 16:03 評論0 收藏0
詳解vue組件三大核心概念

摘要：前言本文主要介紹屬性事件和插槽這三個基礎概念使用方法及其容易被忽略的一些重要細節。至于如何改變，我們接下去詳細介紹單向數據流這個概念出現在組件通信。比如上例中在子組件中修改父組件傳遞過來的數組從而改變父組件的狀態。的一個核心思想是數據驅動。前言本文主要介紹屬性、事件和插槽這三個vue基礎概念、使用方法及其容易被忽略的一些重要細節。如果你閱讀別人寫的組件，也可以從這三個部分展開，它們...

rickchen 2019-08-23 17:51 評論0 收藏0
Vue.js-組件詳解

摘要：事件總線事件總線首先創建了一個名為的空的實例然后全局定義了組件最后創建了實例。在父組件模板中，子組件標簽上使用指定一個名稱，并在父組件內通過來訪問指定名稱的子組件。學習筆記：組件詳解組件詳解組件與復用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。全局注冊 Vue.component(my-component, {}); 要在父實例中使用這個組件，必須要...

jeffrey_up 2019-08-23 16:02 評論0 收藏0