vue插槽 slot 插槽之間的父子傳參

2022-07-21 02:00:11 字數 1415 閱讀 8279

插槽:slot,是元件的一塊html模板,這塊模板顯示不顯示、以及怎樣顯示由 父元件來決定。實際上,乙個slot最核心的兩個問題這裡就點出來了,是顯示不顯示怎樣顯示

顯不顯示和怎樣能夠顯示由父組決定

非插槽模板指的是html模板,指的是『div、span、ul、table』這些,非插槽模板的顯示與隱藏以及怎樣顯示由外掛程式自身控制;

插槽模板是slot,它是乙個空殼子,因為它顯示與隱藏以及最後用什麼樣的html模板顯示由父元件控制。但是插槽顯示的位置確由子元件自身決定,slot寫在元件template的哪塊,父元件傳過來的模板將來就顯示在哪塊

自己的話講:非插槽模板,自己決定自己顯示,插槽:父級決定子級顯示;

一,單個插槽:沒有name屬性。乙個元件只能用一次,slot 沒有name又叫匿名插槽。

匿名插槽,子元件被引入父元件的時候,被父元件使用了,子元件需要乙個來佔位,有名字的佔位,叫具名插槽

例如:子元件:

父元件:

999999

//div的內容代替了子元件的匿名插槽   【父元件999999

===子元件】

自己話說:在子元件中,在父元件中的子元件中顯示,但仍然屬於子元件。單純的占個位置slot

二,具名插槽:有name屬性,乙個頁面你可以使用多次,只要名字不同就行了,slot 加了name屬性,就叫具名插槽;

父元件通過html模板上的slot屬性關聯具名插槽。沒有slot屬性的html模板預設關聯匿名插槽。

父元件:

選單1span>

選單2span>

選單3span>

子元件: 

作用域插槽:子元件通過屬性,將自己內部的原始型別給到父元件;

父元件  共同點是由slot這個單詞

子元件 slot 除了要占個位置還要傳遞引數,父元件slote-scope負責接收引數。

vue插槽樣式 vue中的插槽slot

插槽 slot 是元件的一塊html模板,父元件決定這塊模板顯不顯示以及怎麼顯示。位置由子元件自身決定 slot現在元件template的什麼位置,父元件傳過來的模板將來就顯示在什麼位置 匿名插槽 只能有乙個,可以放在元件的任何位置 在父元件在裡面寫了html模組 子元件的匿名插槽被下面的div模板...

Vue插槽slot 預設插槽 具名插槽 作用域插槽

1.什麼插槽 插槽也成為內容分發 用slot這個內建元件 2.插槽是幹什麼的 在子元件中來顯示父元件中的資料 3.插槽怎麼用 4.在子元件中用括起來乙個區域 5.在父元件的子元件標籤中給插槽傳遞資料,如果父元件不傳輸資料那6.麼直接顯示標籤中的資料 7.插槽的分類 插槽可以分為三類 預設插槽 具名插...

Vue 使用插槽(slot)

當父元件向子元件傳值的時候,有時候,父元件傳的並不是單純的數值 字串,有可能是帶標籤 dom 的資料,那麼如何傳值呢?如果我們像正常父向子傳值那樣操作。content hello,slot slott 子元件 class slott div div template export default s...