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

2021-10-12 10:14:42 字數 2309 閱讀 1436

1.什麼插槽

插槽也成為內容分發 用slot這個內建元件

2.插槽是幹什麼的

在子元件中來顯示父元件中的資料

3.插槽怎麼用

4.在子元件中用括起來乙個區域

5.在父元件的子元件標籤中給插槽傳遞資料,如果父元件不傳輸資料那6.麼直接顯示標籤中的資料

7.插槽的分類

插槽可以分為三類 預設插槽 具名插槽 作用域插槽

預設插槽

只要有位置 就會顯示父元件傳遞來的資料

具名插槽

給slot標籤起名 然後在父元件傳遞資料的時候根據名字查詢就行

示例:子元件

>

>

>

name

="one"

>

這個我子元件預留出來的位置

}slot

>

h2>

>

我的內容p

>

>

插槽的內容

name

="two"

>

slot

>

section

>

div>

template

>

>

export

default}}

script

>

父元件

>

>

>

v-slot:one

>

>

這是我的學生資料p

>

>

}h3>

template

>

>

這是列表的標題呢

template

>

list

>

>

list

>

div>

template

>

>

import list from

"@/components/list"

export

default

,data()

}}script

>

>

style

>

作用域插槽

1.在子元件中給slot繫結乙個屬性 掛載要傳輸的變數 :屬性名=「變數」

2.在父元件中通過 v-slot:名=「suibian」

3.suibian.屬性名來訪問子元件傳過來的資料

示例:子元件

>

>

>

name

="one"

:objuser

="obj"

>

}slot

>

h2>

>

我的內容p

>

>

插槽的內容

name

="two"

:stuobj

="stu"

>

slot

>

section

>

div>

template

>

>

export

default

, stu:}}

}script

>

父元件

>

>

>

v-slot:one

="suibian"

>

>

這是我的學生資料p

>

>

}h3>

template

>

v-slot:two

="suibian"

>

}template

>

list

>

>

list

>

div>

template

>

>

import list from

"@/components/list"

export

default

,data()

}}script

>

>

style

>

slot插槽以及具名插槽

今天剛入職新公司,看了新公司的專案 感覺和之前自己做的專案還是有差距的。自己之前做的專案相對於新公司來說可能還是偏淺,所以無論是框架還是原生的js都要去更加深入的了解才能應對之後的專案。都知道vue元件可以通過slot插槽插入自定義的資訊,但是往更加深入的slot了解的話會發現,slot插槽也有其他...

具名插槽和匿名插槽 vue 插槽

插槽就是子元件中的提供給父元件使用的乙個佔位符,用 表示,父元件可以在這個佔位符中填充任何模板 如 html 元件等,填充的內容會替換子元件的標籤。1.插槽 建立slots.vue 主檔案引入 原生效果 插槽效果。這樣在中間可以巢狀內容 這裡的內容會被插入到slots中顯示 我是插槽 2.預設插槽 ...

Slot 具名插槽的使用

在我們使用插槽的時候,可能裡面會有多個插槽,這個時候也可以定義多個插槽 比如在元件中定義三個插槽,而我只想把標題放在中間,只呼叫中間的插槽的話該怎麼辦。有的人可能會說直接引用不就好了,這種肯定不行,這樣三個都替換掉了。如下右邊的三個就可以看出來,要換的話就全部換掉了,達不到想要的結果 當我們想替換其...