vue插槽slot的用法

2022-06-30 19:42:14 字數 895 閱讀 4271

插槽就是子元件提供給父元件的乙個佔位符,當父元件使用子元件需要填充一些**片段或者內容的時候可以使用slot進行佔位填充。父元件中的內容就會將子元件中的slot替換。

在父元件中使用子元件時,可能有不止乙個地方使用插槽,這個時候就要使用具名插槽。如果不帶名稱的話,就不知道對應的是哪個地方。

當同一些資料需要不同的展示效果的時候你可以使用作用於插槽,也就是資料插槽。

子元件

父元件

總結如果父元件中使用的插槽名稱在子元件不存在,那麼內容將不會顯示。

如果子元件中不存在預設插槽,父元件中使用不帶名稱的插槽,那麼內容將不會顯示。

子元件中若是有多個預設插槽,在父元件中使用時,她會填充到每乙個預設插槽中。

父元件中使用名稱插槽時顯示位置時根據子元件的插槽位置來的,與父元件使用的位置無關。

Vue插槽slot的用法

2.6.0中,使用v slot 以前具名插槽 slot,作用域插槽 slot scope 用法一 插槽內容 template 核心 承載元件的分發內容。定義,在 的模板中 呼叫,呼叫對應的元件 your profile 渲染結果 your profile 用法一 插槽內容 render 定義,在 的...

Vue 特性插槽slot 用法總結

vue的一些特性和方法學習,說一千道一萬不如乙個例子帶來的直觀,下面就是乙個完整的例子來總結 slot各種型別的插槽用法 關於slot這個特性,理解起來要注意幾點 1 slot這個特性設計的目的就是讓子元件能非常方便在父元件上進行擴充套件,子元件的最終頁面呈現極大程度依然于父元件下面的模板如何寫。2...

slot插槽的用法

1.基本用法父頁面向子元件裡插入的標籤 一般情況下,插入單個 my name is tom p child div vue.component child let vm newvue 2.具名用法父頁面向子元件裡插入多個標籤 header 這是頭部 div footer 這是腳部 div conte...