vue slot 的理解,麼麼噠

2021-10-09 22:30:00 字數 1580 閱讀 2783

slot標籤的定義:

巨集觀:vue中專門為元件而服務的標籤

微觀:父元素在子元件中的佔位符。

兩個作用,乙個注意

作用:

決定位置

slot標籤決定了插入子元件中的父元素的位置

子.vue

我是子元素<

/div>

<

/slot>

父.vue

《子》

我是父元素<

/div>

// 在子元件裡插入的父元素

<

/子》

瀏覽器

// 我是父元素  //slot標籤在上

我是子元素

我是父元素 //slot標籤在下

複製父元素

根據slot的數量和位置,可以無限複製插入的父元素(這樣做就沒必要。。。)

<

/slot>

// 子.vue

我是子元素<

/div>

<

/slot>

----

----

----

----

----

----

----

-《子》

// 父.vue

我是父元素<

/div>

// 在子元件裡插入的父元素

<

/子》----

----

----

----

----

----

----

-我是父元素 // 瀏覽器

我是子元素

我是父元素

所以,沒有slot被插入的父元素就不會顯示

我是子元素<

/div>

// 子.vue

----

----

----

----

----

----

----

----

----

----

《子》// 父.vue

我是強行插進來的父元素1

我是強行插進來的父元素2

<

/子》----

----

----

----

----

----

----

----

----

----

我是子元素 // 瀏覽器 // 無論插進多少個父元素都不會顯示

注意:

沒有樣式

樣式不可以在slot內定義,slot只代表位置和數量

錯誤e.g.

='mslot'

>

<

/slot>

這裡是我的線上新家哦,太開心了,麼麼噠!

心情物語 作為乙個準程式設計師,必須要學會專業一些了。以後註冊 呢,優先使用手機號,然後英文名lovingemotion,然後中文名顧木木,最後郵箱 其次真名。密碼呢,就不贅述了。盡量三種情況就可以解決一切問題。第一篇程式筆記是 c 如何隨機產生乙個整數?方法1 include include in...

margin auto你真的理解麼?

含義 margin auto是具有強烈計算意味的關鍵字,用來計算元素對應方向應該獲得的剩餘空間大小 填充規則 1 如果一側定值,一側auto,則auto為剩餘空間大小 2 如果兩側均是auto,則平分剩餘空間 左邊距是20px,右邊距是80px。這裡son寬度是200px,容器是300px,總剩餘空...

margin auto你真的理解麼

含義 margin auto是具有強烈計算意味的關鍵字,用來計算元素對應方向應該獲得的剩餘空間大小 填充規則 1 如果一側定值,一側auto,則auto為剩餘空間大小 2 如果兩側均是auto,則平分剩餘空間 左邊距是20px,右邊距是80px。這裡son寬度是200px,容器是300px,總剩餘空...