Vue 插槽(slot)的理解

2021-10-09 21:37:52 字數 1174 閱讀 6501

父元件向子元件傳值我們會一般用到props,那傳遞乙個dom節點呢?

使用插槽slot,能高效地解決父元件向子元件插入dom節點問題。

插槽:在vue中,可以在元件內部定義乙個或多個插槽,子元件決定插槽的位置,也可以設定預設的資訊,父元件在插槽裡插入資訊,有預設資訊時,父元件不插入資訊,則顯示子元件的預設資訊;

下面就列舉下關於插槽的使用方式:

1、匿名插槽

//元件(父)

父頁面//匿名插槽即為預設插槽,也可以寫成 父頁面

//元件(子)

//頁面渲染結果

父頁面

2、具名插槽v-slot只能新增在插槽的模板template上,如果元件裡只有預設插槽時,元件的標籤才可以被當作插槽的模板來使用;

//元件(父)

//寫法一:

父頁面//寫法二(綜合寫法一的簡寫):

父頁面//元件(子)

子頁面//頁面渲染結果

父頁面

動態的具名插槽:

//元件(父)

父頁面//元件(父)js:

data()

}

3、作用域插槽

//元件(父)

//寫法一:

} //元件(子)

//元件(子)js:

data()

}//頁面渲染結果

子元件傳參

子元件有多個相同名字的插槽,在父元件中同乙個元件標籤只插入一條插槽資訊,會顯示多個相同的插槽資訊;

//元件(父)

父頁面//元件(子)

子頁面子頁面2

子頁面3

//頁面渲染結果

父頁面父頁面父頁面

如果父元件裡同乙個子元件的標籤有多條相同的插槽資訊,但是子元件只有乙個插槽,那只會顯示父元件的最後一條插槽資訊;

vue中的插槽slot理解

本篇文章參考賽冷思的個人部落格 1.函式預設傳參 在我們寫js函式我們的可能會給他們乙個預設的引數,寫法是 function show age,name show 20,張三 show 18,命名 18,明明 如果使用者不傳入引數,那麼會輸出預設值,如果使用者傳入,會輸出傳入的值,這種寫法很靈活 v...

vue插槽樣式 vue中的插槽slot

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

Vue 使用插槽(slot)

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