vue.js的<slot>

philadelphia 發布于2019-08-22 13:49 / 2210人閱讀

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

使用插槽分發內容
在封裝vue組件的時候，很多時候就不得不使用到vue的一個內置組件。slot是插槽的意思，顧名思義，這個組件的意義是預留一個區域，讓其中的DOM結構可以由調用它的組件來渲染。

假設現在有一個people組件，結構如下：

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

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


    用戶信息
    
      *填寫的內容必須真實
      姓名
      性別

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

我們改變一下的封裝方式：

我們在需要由父組件來渲染的部分使用插槽，相當于占位。這樣我們就可以在調用的時候，再指定這個組件里面有什么內容：



渲染之后是：


    用戶信息
    
      *填寫的內容必須真實
      姓名
      性別

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

匿名插槽和具名插槽

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

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


  
  


調用

  slot1的內容
  slot2的內容


渲染的結果：

  slot1的內容
  slot2的內容

作用域插槽

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

子組件 的模板


父組件中調用：

    
        
    


渲染的結果為：

    
    子組件內部的tip

云服務器 GPU云服務器 asp中&lt&gt的意思 python &lt&gt java &lt=&gt java&lt &gt

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

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

Vue編程三部曲之模型樹優化實戰代碼

　　實踐是所有展示最好的方法，因此我覺得可以不必十分細致的，但我們的展示卻是整體的流程、輸入和輸出。現在我們就看看Vue 的指令、內置組件等。也就是第二篇，模型樹優化。　　分析了 Vue 編譯三部曲的第一步，「如何將 template 編譯成 AST ?」上一篇已經介紹，但我們還是來總結回顧下，parse 的目的是將開發者寫的 template 模板字符串轉換成抽象語法樹 AST ，AST 就這里...

3403771864 2022-10-10 22:36 評論0 收藏0
詳解Vue3 Composition API優雅封裝第三方組件

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

3403771864 2022-10-30 10:34 評論0 收藏0
解析Vue編譯器optimize源碼

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

3403771864 2022-10-09 22:06 評論0 收藏0
基于element-ui表格的二次封裝實現

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

3403771864 2022-09-12 18:39 評論0 收藏0
python中的特性管理模式詳細說明

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

89542767 2023-01-14 10:48 評論0 收藏0