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

資訊專欄INFORMATION COLUMN

vue.js的<slot>

philadelphia / 2214人閱讀

摘要：而事實上這個的組件功能邏輯完全和一樣，只是多了一項年齡信息。這也是插槽最基本的用法。匿名插槽和具名插槽除非子組件模板包含至少一個插口，否則父組件的內(nèi)容將會被丟棄?？梢酝ㄟ^為插槽指定具名插槽來指定渲染一個組件中多個插槽中的某一個。

使用插槽分發(fā)內(nèi)容
在封裝vue組件的時候，很多時候就不得不使用到vue的一個內(nèi)置組件。slot是插槽的意思，顧名思義，這個組件的意義是預(yù)留一個區(qū)域，讓其中的DOM結(jié)構(gòu)可以由調(diào)用它的組件來渲染。

假設(shè)現(xiàn)在有一個people組件，結(jié)構(gòu)如下：

當(dāng)我們注冊這個組件之后，就可以在其他組件中這樣子使用


我們都很清楚上面的代碼最后渲染的樣子。

    
用戶信息

    

      *填寫的內(nèi)容必須真實

一般來說我們這樣子封裝組件是沒有問題的了。但是有時候我們在開發(fā)中，需要的組件還需要更抽象一點。我們試想以下，假設(shè)我們的組件的功能是獲取用戶的信息，點擊確定上傳到服務(wù)器。如果是按照上面的方式封裝這個組件，那么我們每次調(diào)用這個組件就只能讓用戶輸入姓名和性別。假設(shè)在另外的場景中，我們還需要用戶輸入多一項年齡信息，那我們的這個組件就不能使用了，就還得需要另外一個一個組件。。而事實上這個的組件功能邏輯完全和一樣，只是多了一項年齡信息。在這種情況下，就相當(dāng)于再寫了一個重復(fù)的組件。那有沒有辦法可以讓我們的組件可以更通用點。這時候擺在我們面前的問題就是，能不能在調(diào)用的時候，可以指定組件應(yīng)該怎么渲染?組件就是為了解決這種問題而存在的。

我們改變一下的封裝方式：
我們在需要由父組件來渲染的部分使用插槽，相當(dāng)于占位。這樣我們就可以在調(diào)用的時候，再指定這個組件里面有什么內(nèi)容：


渲染之后是：



    
用戶信息

    

      *填寫的內(nèi)容必須真實

這樣子我們的組件就更為通用了。并且當(dāng)調(diào)用的組件沒有指定內(nèi)容的時候，組件里的內(nèi)容會渲染。如下圖。這也是vue.js插槽最基本的用法。

匿名插槽和具名插槽

除非子組件模板包含至少一個 插口，否則父組件的內(nèi)容將會被丟棄。當(dāng)子組件模板只有一個沒有屬性的插槽（匿名插槽）時，父組件傳入的整個內(nèi)容片段將插入到插槽所在的 DOM 位置，并替換掉插槽標(biāo)簽本身。

可以通過為插槽指定name（具名插槽）來指定渲染一個組件中多個插槽中的某一個。


  
  



調(diào)用

  
slot1的內(nèi)容

  
slot2的內(nèi)容



渲染的結(jié)果：


  
slot1的內(nèi)容

  
slot2的內(nèi)容
作用域插槽

這種特殊的插槽可以暴露子組件中的內(nèi)容,把數(shù)據(jù)交由父組件來渲染。看下面的例子：

子組件 的模板


父組件中調(diào)用：


    
        
    



渲染的結(jié)果為：


    

    
子組件內(nèi)部的tip

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

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

相關(guān)文章

  • Vue編程三部曲之模型樹優(yōu)化實戰(zhàn)代碼

    　　實踐是所有展示最好的方法，因此我覺得可以不必十分細(xì)致的，但我們的展示卻是整體的流程、輸入和輸出。現(xiàn)在我們就看看Vue 的指令、內(nèi)置組件等。也就是第二篇，模型樹優(yōu)化?！　》治隽?Vue 編譯三部曲的第一步，「如何將 template 編譯成 AST ?」上一篇已經(jīng)介紹，但我們還是來總結(jié)回顧下，parse 的目的是將開發(fā)者寫的 template 模板字符串轉(zhuǎn)換成抽象語法樹 AST ，AST 就這里...

    3403771864 評論0 收藏0

  • 詳解Vue3 Composition API優(yōu)雅封裝第三方組件

    　　我們時常會想在保持第三方組件原有功能（屬性props、事件events、插槽slots、方法methods）的基礎(chǔ)上，這些功能如何優(yōu)化的實現(xiàn)？　　以Element Plus的el-input為例：　　在封裝一個MyInput組件，把要使用的屬性props、事件events和插槽slots、方法methods先要依照自己的需求來編寫：　　//MyInput.vue 　　<template&...

    3403771864 評論0 收藏0

  • 解析Vue編譯器optimize源碼

    　　之前我們講過template轉(zhuǎn)成AST（抽象語法樹），現(xiàn)在我就繼續(xù)對模型樹優(yōu)化，進(jìn)行靜態(tài)標(biāo)注。這要如何實現(xiàn)？　　在源碼的注釋中我們找到了下面這段話：　　/** * Goal of the optimizer: walk the generated template AST tree * and detect sub-trees that are purely static, i.e. part...

    3403771864 評論0 收藏0

  • 基于element-ui表格的二次封裝實現(xiàn)

    　　項目中element的表格，每次都cv很麻煩，可以用表格進(jìn)行了二次封裝，寫一個Table組件?！　∈紫?，下面是表格樣式　　<el-table 　　:data="tableData" 　　:header-cell-style="headerStyle" 　　:height="height" 　　:border="bord...

    3403771864 評論0 收藏0

  • python中的特性管理模式詳細(xì)說明

    　　本文關(guān)鍵闡述了python中的特性管理模式,主要包含私有屬性和特性局限-__slots__方式，原文中闡述了python中怎樣去聲明變量的基本知識，必須的小伙伴可以借鑒一下　　一、私有屬性　　Python并沒真正意義上的民營化適用，但可以用下橫線獲得偽私，其中一項大部分Python編碼都遵照的好習(xí)慣：含有下橫線，作為前綴的名字應(yīng)被稱作非公開的API中的一部分（不論是函數(shù)公式、方式或是數(shù)據(jù)成員）...

    89542767 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<