工作總結5 插槽的使用

2021-10-24 21:13:36 字數 2276 閱讀 6731

插槽就是子元件中的提供給父元件使用的乙個佔位符,用 表示,父元件可以在這個佔位符中填充任何模板**,如 html、元件等,填充的內容會替換子元件的標籤。

如下**:

1. 在子元件中放乙個佔位符

2. 在父元件中給這個佔位符填充內容:

3. 展示的效果

現在來看看,如果子元件中沒有放插槽,同樣的父元件中在子元件中填充內容,會是啥樣的:

1. 子元件**無插槽:

2. 父元件照常填充內容:

3. 展示的效果:

總結:如果子元件沒有使用插槽,父元件如果需要往子元件中填充模板或者html, 是沒法做到的

插槽的最最簡單使用,上面已有例子,這裡就不寫了,接下來看看,插槽其他使用場景

描述:具名插槽其實就是給插槽娶個名字。乙個子元件可以放多個插槽,而且可以放在不同的地方,而父元件填充內容時,可以根據這個名字把內容填充到對應插槽中。

如下**:

1. 子元件的**,設定了兩個插槽(header和footer):

2. 父元件填充內容, 父元件通過 v-slot:[name] 的方式指定到對應的插槽中

3.展示的效果:

接下來再來看看,父元件中填充內容的時候,順序調換下,看下能不能內容能不能對應上:

1. 子元件**不變,父元件**中填充順序調換下(如圖,在父元件中,footer 和 header 的填充位置對換):

2. 展示的效果:

由此看出,即使父元件對插槽的填充的順序打亂,只要名字對應上了,就可以正確渲染到對應的插槽中。即: 父元件填充內容時,是可以根據這個名字把內容填充到對應插槽中的

描述: 預設插槽就是指沒有名字的插槽,子元件未定義的名字的插槽,父級將會把 未指定插槽的填充的內容填充到預設插槽中。

示例**如下:

1.子元件**定義了乙個預設插槽:

2.父元件給預設插槽填充內容:

3. 展現的內容

注意:1.  父級的填充內容如果指定到子元件的沒有對應名字插槽,那麼該內容不會被填充到預設插槽中。

2.  如果子元件沒有預設插槽,而父級的填充內容指定到預設插槽中,那麼該內容就「不會」填充到子元件的任何乙個插槽中。

3.  如果子元件有多個預設插槽,而父元件所有指定到預設插槽的填充內容,將「」 「全都」填充到子元件的每個預設插槽中。

作用域插槽的概念和使用比較難於理解,通過檢視多方資料,做了以下的總結:

描述:作用域插槽其實就是帶資料的插槽,即帶引數的插槽,簡單的來說就是子元件提供給父元件的引數,該引數僅限於插槽中使用,父元件可根據子元件傳過來的插槽資料來進行不同的方式展現和填充插槽內容。

使用方法:

子元件存放乙個帶資料的插槽: mylist和title是子元件傳給父元件的引數

父元件通過 「slot-scope」 來接收子元件傳過來的插槽資料,再根據插槽資料來填充插槽的內容

展現的效果:

常用場景(以下為常用的情況之一)

如果子元件中的某一部分的資料,每個父元件都會有自己的一套對該資料的不同的呈現方式,這時就需要用到作用域插槽。

工作總結 git的使用

git中clone專案有兩種方式 https和ssh https 不管是誰,拿到url隨便clone,但是在push的時候需要驗證使用者名稱和密碼 ssh clone專案你必須是擁有者或者管理員,而且需要在clone前新增ssh key。ssh在push的時候,是不需要輸入使用者名稱的,如果配置ss...

半年的工作總結

來到新公司有一段時間了,在這段時間裡收貨很多,感到自己的程式設計境界又上了一層,閒來無事總結一下 1 開始頻頻涉獵源 的閱讀。例如memcache,json,myibatis,struts等原始碼的閱讀。在涉獵開源框架原始碼閱讀的同時,我還重溫了jdk重點類的源 比如threadlocal,exce...

最近的工作總結

涉及到的就是正則 多執行緒 反射。httpwebrequest httpwebresponse webclient cookie streamreader這些類來回倒騰。還有抓包工具httpanalyzerstdv7。具體的結構就是簡單三層。winfrom做介面。bll業務邏輯,負責生成和調控採集發...