vue 中slot 的具體用法

2022-02-26 21:43:26 字數 1391 閱讀 5371

子元件

父元件

跳轉到詳情

父元件}

這種情況是如果要父元件在子元件中插入內容 ,必須要在子元件中宣告slot標籤  ,如果子元件模板不包含插口,父元件的內容}

將會被丟棄。

當slot存在預設值預設值

,且父元素在中沒有要插入的內容時,會顯示預設值

(p標籤會去掉),當slot存在預設值,且父元素在中存在要插入的內容時,則顯示父元件中設定的值,

具名slot

特性的元素

var childnode = ;

var parentnode = ,

};

仍然可以有乙個匿名 slot,它是預設 slot,作為找不到匹配的內容片段的備用插槽。匿名slot只能作為沒有slot屬性的元素的插槽,有slot屬性的元素如果沒有配置slot,則會被拋棄

var childnode = ;

var parentnode = ,

};

插入中,我是其他內容

插入中,而被丟棄

如果沒有預設的 slot,這些找不到匹配的內容片段也將被拋棄

var childnode = ;

var parentnode = ,

};

我是其他內容

和都被拋棄

作用域插槽

作用域插槽是一種特殊型別的插槽,用作使用乙個 (能夠傳遞資料到) 可重用模板替換已渲染元素。

在子元件中,只需將資料傳遞到插槽,就像將 props 傳遞給元件一樣

在父級中,具有特殊屬性 scope 的 元素必須存在,表示它是作用域插槽的模板。scope 的值對應乙個臨時變數名,此變數接收從子元件中傳遞的 props 物件.

var childnode = ;

var parentnode = }

`,components: ,

};

如果渲染以上結果,得到的輸出是

【列表元件】

作用域插槽更具代表性的用例是列表元件,允許元件自定義應該如何渲染列表每一項

var childnode = ,

, ,

] }}};

var parentnode = }

`,components: ,

};

sizeof 具體用法

sizeof 函式功能 計算資料所占有空間的大小。1 對於指標變數所有sizeof 所得到結果為4 2 sizeof 所計算的資料所儲存的記憶體空間的大小,用位元組數表示 與strlen 函式比較,sizeof以 0 為結束判斷,計算為 0 的陣列元素,而strlen則不計算 0 的陣列元素。注意 ...

scp的具體用法

不同的linux之間copy檔案常用有3種方法 第一種就是ftp,也就是其中一台linux安裝ftp server,這樣可以在另外一台機器使用ftp的client程式來進行檔案的copy。第二種方法就是採用samba服務,類似windows檔案copy 的方式來操作,比較簡潔方便。第三種就是利用sc...

margin的具體用法

margin px 意思就是上下左右元素塊距離就是?px 畫素 等於margin top px margin bottom px margin left px margin right px 其實都是設定不同的?畫素屬性。例如 margin 5px 10px 意思上下元素塊距離為5px,左右的元素塊...