成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

KavenFan / 1230人閱讀

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

也許你已經(jīng)看過(guò)了Vue.js slots的文檔。我對(duì)這個(gè)功能從“為什么你可能需要它”到“沒(méi)有它我怎么可能工作”的態(tài)度轉(zhuǎn)變非?？?。
雖然文檔已經(jīng)解釋了它的概念，但是這里有一個(gè)關(guān)于slots怎么改進(jìn)應(yīng)用程序代碼庫(kù)的真實(shí)例子。
在我看來(lái)，slots是vue最有用和最有趣的特性之一。雖然這是web組件所推薦的標(biāo)準(zhǔn)，但是我不知道有其他框架已經(jīng)實(shí)現(xiàn)了這一特性。解釋slots的作用很簡(jiǎn)單，但是很難解釋它為什么有用（如果不使用“可組合性”這個(gè)術(shù)語(yǔ)），所以我要給你一個(gè)使用例子。

假設(shè)你的app有很多表單，表單包含幾個(gè)部分：

表單頭部：包含關(guān)于表單的信息

表單元素：供用戶輸入

按鈕

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

你創(chuàng)建了這樣一個(gè)組件：




  
{{ title }}

使用方法如下：

這樣就可以正常運(yùn)行了?？墒?，產(chǎn)品告訴你，一個(gè)特定的表單需要一個(gè)文本塊來(lái)獲得幫助信息的標(biāo)題，按鈕名要改為“Request”。這超出了“children”能做的范圍。




  
{{ title }}

  
{{ helpMessage }}

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




  
{{ title }}

使用方法：



  

    Please ask your manager before requesting hardware.

在我看來(lái)，關(guān)鍵思想是：

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

使用slots的其他場(chǎng)景：

通用的模態(tài)窗

類似bootstrap的面板和自定義內(nèi)容這樣的事情

使用slots的更多優(yōu)點(diǎn)：

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

如果沒(méi)有傳遞內(nèi)容給slots，就不會(huì)展示東西。這讓你可以很好地復(fù)用它們，并且只在你想要的slots中傳遞。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90109.html

相關(guān)文章

  • Vue.js 的注意事項(xiàng)與技巧

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

    lsxiao 評(píng)論0 收藏0

  • Vue.js非常重要之組件

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

    ysl_unh 評(píng)論0 收藏0

  • Vue.js-Render函數(shù)

    摘要：函數(shù)通過(guò)參數(shù)來(lái)創(chuàng)建虛擬，結(jié)構(gòu)精簡(jiǎn)。其中，訪問(wèn)的用法，使用場(chǎng)景集中在函數(shù)。使用代替模板功能在函數(shù)中，不再需要內(nèi)置的指令，比如。方法時(shí)快速改變數(shù)組結(jié)構(gòu)，返回一個(gè)新數(shù)組。 學(xué)習(xí)筆記：Render函數(shù) Render函數(shù) Vue2與Vue1最大的區(qū)別就在于Vue2使用了虛擬DOM來(lái)更新DOM節(jié)點(diǎn)，提升渲染性能。 Vue2與Vue1最大的區(qū)別就在于Vue2使用了虛擬DOM來(lái)更新DOM節(jié)點(diǎn)，提升...

    ccj659 評(píng)論0 收藏0

  • 詳解vue組件三大核心概念

    摘要：前言本文主要介紹屬性事件和插槽這三個(gè)基礎(chǔ)概念使用方法及其容易被忽略的一些重要細(xì)節(jié)。至于如何改變，我們接下去詳細(xì)介紹單向數(shù)據(jù)流這個(gè)概念出現(xiàn)在組件通信。比如上例中在子組件中修改父組件傳遞過(guò)來(lái)的數(shù)組從而改變父組件的狀態(tài)。的一個(gè)核心思想是數(shù)據(jù)驅(qū)動(dòng)。 前言 本文主要介紹屬性、事件和插槽這三個(gè)vue基礎(chǔ)概念、使用方法及其容易被忽略的一些重要細(xì)節(jié)。如果你閱讀別人寫(xiě)的組件，也可以從這三個(gè)部分展開(kāi)，它們...

    rickchen 評(píng)論0 收藏0

  • Vue.js-組件詳解

    摘要：事件總線事件總線首先創(chuàng)建了一個(gè)名為的空的實(shí)例然后全局定義了組件最后創(chuàng)建了實(shí)例。在父組件模板中，子組件標(biāo)簽上使用指定一個(gè)名稱，并在父組件內(nèi)通過(guò)來(lái)訪問(wèn)指定名稱的子組件。 學(xué)習(xí)筆記：組件詳解 組件詳解 組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。 全局注冊(cè) Vue.component(my-component, {}); 要在父實(shí)例中使用這個(gè)組件，必須要...

    jeffrey_up 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<