Vue 中插槽slot的用法和應用場景

2022-05-17 01:06:55 字數 1758 閱讀 5260

我們知道在vue中 child 元件的標籤 的中間是不可以包著什麼的 。

可是往往在很多時候我們在使用元件的時候總想在元件間外面自定義一些標籤,vue新增了一種插槽機制,叫做作用域插槽。要求的版本是2.1.0+;

插槽,其實就相當於佔位符。它在元件中給你的html模板佔了乙個位置,讓你來傳入一些東西。插槽又分為 匿名插槽、具名插槽、作用域插槽。

在 2.6.0 中,我們為具名插槽和作用域插槽引入了乙個新的統一的語法 (即v-slot指令)。它取代了slotslot-scope

匿名插槽,我們也可以叫它單個插槽或者預設插槽。和具名插槽相對,它是不需要設定 name 屬性的,它隱藏的name屬性為default。

匿名插槽,name的屬性對應的是  default 也可以不寫就是預設的意思啦;

在使用的時候還有乙個問題要注意的 如果是有2個以上的匿名插槽是會child標籤裡面的內容全部都替換到每個slot;

顧名思義就是slot 是帶有name的 ,定義:    或者使用簡單縮寫的定義 #header

使用:要用乙個 template標籤包裹

這裡說一下多個具名插槽的使用 多個具名插槽,插槽的位置不是使用插槽的位置而定的,是在定義的時候的位置來替換的

就是用來傳遞資料的插槽

當你想在乙個插槽中使用資料時,要注意乙個問題作用域的問題,vue 官方文件中說了

父級模板裡的所有內容都是在父級作用域中編譯的;子模板裡的所有內容都是在子作用域中編譯的;

為了讓 子元件中的資料 在父級的插槽 內容中可用我們可以將 資料 作為 元素的乙個特性繫結上去: 

v-bind:text="text" 

注意:匿名的作用域插槽和具名的作用域插槽 區別在v-slot:defult="接受的名稱"(defult(匿名的可以不寫,具名的相反要寫的是對應的name)) 

v-solt可以解構接收 解構接收的字段要和傳的字段一樣才可以 例如 :one 對應  v-slot=""

效果圖

Vue插槽slot的用法

2.6.0中,使用v slot 以前具名插槽 slot,作用域插槽 slot scope 用法一 插槽內容 template 核心 承載元件的分發內容。定義,在 的模板中 呼叫,呼叫對應的元件 your profile 渲染結果 your profile 用法一 插槽內容 render 定義,在 的...

vue插槽slot的用法

插槽就是子元件提供給父元件的乙個佔位符,當父元件使用子元件需要填充一些 片段或者內容的時候可以使用slot進行佔位填充。父元件中的內容就會將子元件中的slot替換。在父元件中使用子元件時,可能有不止乙個地方使用插槽,這個時候就要使用具名插槽。如果不帶名稱的話,就不知道對應的是哪個地方。當同一些資料需...

vue插槽樣式 vue中的插槽slot

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