Vue元件中slot的用法

2021-08-10 12:10:46 字數 771 閱讀 1363

主要是讓元件的可擴充套件性更強。

1. 使用匿名slot

//定義元件my-component

//使用方法

我就是slot的替代內容,這裡可以放任何標籤元素

2. 給slot加個名字

//定義元件my-component

//使用方法

我就是這個叫myslot的slot替代內容,這裡可以放任意標籤,即使是一長串ul》li列表,但是我是乙個有名字的寶寶,所以你必須給我加上slot=「myslot」不然我就報錯給你看!

如果不在有slot的元件裡加入任何標籤,slot什麼都不會顯示的。

應用場景:

案例: 餓了麼頁面頭部,根據slot中name不同,顯示不同的標籤

頭部元件**:

template>

登入|註冊

}

定位頁面呼叫:

ele.me

vue中slot元件的使用

插槽 slot 是vue提出來的乙個概念,正如名字一樣,插槽用於決定將所攜帶的內容,插入到指定的某個位置,從而使模板分塊,具有模組化的特質和更大的重用性。slot 是在元件模板中設定的用於在父元件中插入其孫子元件 即自身的子元件 或dom片段的插槽。匿名solt 子元件中 這裡插入父元件在引用子元件...

vue中slot元件的使用

插槽 slot 是vue提出來的乙個概念,正如名字一樣,插槽用於決定將所攜帶的內容,插入到指定的某個位置,從而使模板分塊,具有模組化的特質和更大的重用性。slot 是在元件模板中設定的用於在父元件中插入其孫子元件 即自身的子元件 或dom片段的插槽。匿名solt 子元件中 這裡插入父元件在引用子元件...

vue 中slot 的具體用法

子元件 父元件 跳轉到詳情 父元件 這種情況是如果要父元件在子元件中插入內容 必須要在子元件中宣告slot標籤 如果子元件模板不包含插口,父元件的內容 將會被丟棄。當slot存在預設值預設值 且父元素在中沒有要插入的內容時,會顯示預設值 p標籤會去掉 當slot存在預設值,且父元素在中存在要插入的內...