vue學習之 動態插槽名

2021-09-13 09:50:45 字數 823 閱讀 1934

1.具名插槽的縮寫

跟 v-on 和 v-bind 一樣,v-slot 也有縮寫,即把引數之前的所有內容 (v-slot:) 替換為字元 #。例如 v-slot:header 可以被重寫為 #header:

a paragraph for the main content.

and another one.

here's some contact info

然而,和其它指令一樣,該縮寫只在其有引數的時候才可用。這意味著以下語法是無效的:

}如果你希望使用縮寫的話,你必須始終以明確插槽名取而代之:

}

其它示例

插槽 prop 允許我們將插槽轉換為可復用的模板,這些模板可以基於輸入的 prop 渲染出不同的內容。這在設計封裝資料邏輯同時允許父級元件自定義部分布局的可復用元件時是最有用的。

例如,我們要實現乙個 元件,它是乙個列表且包含布局和過濾邏輯:

我們可以將每個 todo 作為父級元件的插槽,以此通過父級元件對其進行控制,然後將 todo 作為乙個插槽 prop 進行繫結:

現在當我們使用 元件的時候,我們可以選擇為 todo 定義乙個不一樣的 作為替代方案,並且可以從子元件獲取資料:

}

總結:上面例子的含義是說我們可以自定義了子元件,使用slot來填充內容,但是我們自己可以以此為模板,外部使用時,可以新增一些自己的屬性。

vue插槽樣式 vue基礎之插槽

categories vue基礎 tags 插槽element ui 插槽slot 插槽 vue內建元件 做為承載分發內容的出口 普通插槽 插槽使用 全域性元件 第乙個引數是元件名,第二個引數是options vue.component vbtn template 我是頭部元件 var vconte...

vue學習 slot插槽學習

不使用插槽,在template中用v html解析父元件傳來的帶有標籤的content 使用插槽,如果父元件為空,就會顯示slot中定義的預設內容 rachel vue.component child 使用插槽新增header和footer,使用 具名插槽 也就是給插槽起個名字,各找各的位置。此處也...

Vue元件化之插槽

類似電腦的usb,使用介面給電腦增加不同的功能,鍵盤 音響,而不是直接在元件裡新增 介紹 預設自定義標籤內不允許新增內容,而插槽可以讓我們在內部新增內容 封裝方法 抽取共性,保留不同。使用方法 直接在template中插入slot空標籤,即可在自定義標籤中插入內容,內容會自動替換空slot 元件標籤...