22 VUE 插槽 詳解

2022-08-16 23:06:10 字數 3815 閱讀 2538

一直對插槽不理解，今天學習，並整理一下，希望日後可以靈活運用。

先簡單來個例子，看一下插槽的租作用。

<


div 


id>


<


h1>這是父元件：}


h1>


<


child-component


>你好


child-component


>


div>



<


div>


<


h2>這是子元件，child-component


h2>


div>
父元件引用子元件時，在子元件內寫入：如（你好或者html），都不會顯示。

你好

vue 實現了一套內容分發的 api，這套 api 的設計靈感源自 web components 規範草案，將元素作為承載分發內容的出口。當元件渲染的時候，將會被替換為「你好」。插槽內可以包含任何模板**，包括 html

父元件：

<


div 


id>


<


h1>這是父元件：}


h1>


<


child-component


>


<


span


>slot 測試


span


>


child-component


>


div>
如果子元件中沒有任何的，那麼在父元件中引用子元件時，在子元件的起始標籤和結束標籤之間的任何內容都會被拋棄。

後備內容，即為沒有為插槽設定任何內容時，顯示的預設內容。

沒有為插槽設定任何內容

<


div 


id>


<


h1>這是父元件：}


h1>


<


child-component


>


child-component


>


div>
在子元件中，新增後備內容

<


div>


<


h2>這是子元件，child-component


h2>


<


slot


>


<


span


>這是後備內容


但是如果設定插槽，後備內容則不會顯示。


有的時候，我們需要多個插槽，例如：


<


div 


id>


<


h1 style


="text-align: center"


>這是父元件：}


h1>


<


child-component


>


<


template 


v-slot:header


>


<


h3 style


="text-align: center;color: blue"


>這是header部分


h3>


template


>


<


p style


="color: blueviolet;text-align: center"


>這是主題部分


p>


<


template 


v-slot:fooder


>


<


h3 style


="text-align: center;color: aqua"


>這是fooder部分


h3>


template


>


child-component


>


div>




<


div>


<


h2 style


="text-align: center"


>這是子元件，child-component


h2>


<


slot 


name


="header"


>


slot


>


<


slot


>


slot


>


<


slot 


name


="footer"


>


slot


>


div>


父元件中插槽中，可以取到子元件中資料。


在v-slot新增元素上的特性被稱為插槽 prop


<


div 


id>


<


h2 >這是父元件！


h2>


<


child-slot


>


<


template 


v-slot:default


="user"


>


<


p>父元件中，取子元件中的值：}


p>


template


>


child-slot


>


div>


在中，繫結資料v-bind:user="user"


<


div>


<


h2>這是子元件


當子元件中，只提供預設插槽時，元件的標籤才可以被當作插槽的模板來使用。這樣我們就可以把v-slot直接用在元件上：


<


child-slot


>


<


template 


v-slot:default


="user"


>


<


p>父元件中，取子元件中的值：}


p>


template


>


child-slot


>


也可以，簡寫為：


<


child-slot


>


<


template 


v-slot


="user"


>


<


p>父元件中，取子元件中的值：}


p>


template


>


child-slot


>


				
2 2 vue環境搭建以及vue cli使用
用腳手架建立模板，只需要寫 而不用關注太多 通過cnpm去run dev 或者 build 會在後台開乙個shell視窗 先把需要的依賴 npm install 都安裝上然後再執行專案 ps vue配置資訊 1.bulid 配置檔案所在的資料夾 bulid內的config檔案是webpack的配置 ...

				
Vue 插槽詳解
vue插槽，是學習vue中必不可少的一節，當初剛接觸vue的時候，對這些掌握的一知半解，特別是作用域插槽一直沒明白。後面越來越發現插槽的好用。分享一下插槽的一些知識吧。分一下幾點 1 插槽內可以放置什麼內容？2 預設插槽 3 具名插槽 4 作用域插槽 一 插槽內容 一句話 插槽內可以是任意內容。先看...

				
vue插槽（slot）詳解
最近被問起是否了解vue的插槽 slot 咋一想發現，似乎很少用到這玩意。所以整理了下slot的一些用法。vue 實現了一套內容分發的 api，將元素作為承載分發內容的出口，這是vue文件上的說明。具體來說，slot就是可以讓你在元件內新增內容的 空間 舉個例子 子元件 假設名為 ebutton 父...