Vue中的v slot詳解,作用域插槽和具名插槽

2021-10-08 18:30:34 字數 639 閱讀 9529

1、具名插槽

有時候我們希望在指定的位置輸出我們的子元素,這時候具名插槽就排上了用場。

//元件呼叫時

//這裡v-slot:後邊的值與元件內的slot的name屬性對應,也就是插槽的名稱。

list

//書寫元件時

}//這裡name的值就是這個插槽的名稱。

最後我們會在我們想要的位置將我們的元素放置。

2、作用域插槽

作用域插槽的主要作用是在書寫插槽內容時可以獲取到插槽作用域的值。

//元件呼叫

//書寫元件時

注意事項:

這裡需要注意的是message是所有你繫結屬性的集合,也就是你寫的:aa=「title」會當做message的屬性來實現。當然這裡message可以換做其它的名稱。

3、總結

v-slot的出現是為了代替原有的slot和slot-scope

簡化了一些複雜的語法。

一句話概括就是v-slot :後邊是插槽名稱,=後邊是元件內部繫結作用域值的對映。

我是header

我是main

// index.vue

我是新的header

哈哈哈哈

我是預設的

}我是新的header

}

Vue中v slot的用法

記錄一下vue插槽的用法,以免忘記。包含預設插槽,具名插槽,作用域插槽的用法,預設插槽和具名插槽都可以是作用域插槽,本示例中三個都包含作用域。vue cli4.0.5 父元件test.vue test test for info in msg key info.firstname header da...

Vue中v slot插槽的使用

在vue2.6.0以上版本v slot將取代slot scope和slot。這裡取代的意思是 v slot在呼叫時取代了 slot 和 slot scope,而在template中宣告時仍會用solt進行宣告插槽。匿名插槽 1.匿名插槽 template cpn1 div vue.component...

vue作用域插槽slot scope詳解

vue的插槽,也就是slot,是元件的一塊html模板,這塊模板顯示不顯示 以及怎樣顯示由父元件來決定。實際上,乙個slot最核心的兩個問題這裡就點出來了,是顯示不顯示和怎樣顯示。了解vue的同學都知道插槽分為單個插槽,具名插槽,還有作用域插槽,前兩種比較簡單這裡就不贅述了,今天的重點是討論作用域插...