vue中插槽的使用詳解

2021-10-07 23:37:54 字數 1725 閱讀 4668

插槽的使用場景,個人理解勿噴:當你在父元件中想要操作子元件,往子元件插入html**片段的時候,這時候插槽的作用就是體現了,如果子元件不設定插槽,父元件是插入不了子元件中的**片段的。

單個插槽可以放置在元件的任意位置,但是就像它的名字一樣,乙個元件中只能有乙個該類插槽。相對應的,具名插槽就可以有很多個,只要名字(name屬性)不同就可以了。

看**

父元件

'father'>//使用之前別忘在components裡註冊子元件

選單1 //這裡往子元件裡插入**塊

選單2選單3

子元件

"child">

"child"> //如果不設定插槽 不會顯示父級中的span標籤

匿名插槽沒有name屬性,所以是匿名插槽,那麼,插槽加了name屬性,就變成了具名插槽。具名插槽可以在乙個元件**現n次。出現在不同的位置

父元件

"father">選單2

"demo3">選單3

子元件

"child">

"child">

"demo3">//可以定義多個,與父元件solt=『』對應即可

父元件模板的所有東西都會在父級作用域內編譯;子元件模板的所有東西都會在子級作用域內編譯。不過,我們可以在父元件中使用 slot-scope 特性從子元件獲取資料

前提是需要在子元件中使用 :data=data 先傳遞 data 的資料

父元件

>

="father"

>

/h3>

"user"

>

//這裡一定要寫在template 模板裡邊 進行傳值

}<

/div>

<

/template>

<

/child>

<

/div>

<

/div>

<

/template>

子元件

Vue中插槽的使用。

寫在前面 vue中插槽的使用讓元件變得更加靈活。使得封裝乙個元件的復用性和api的暴露更加靈活多變。當元件當做標籤使用的時候,在標籤裡面的元素不會顯示,這個時候就需要用到插槽。一 最基本的使用 當元件當做標籤使用的時候,在元件標籤內部的標籤往往不顯示,這個時候就需要用到插槽。寫在元件標籤內部的標籤需...

Vue中插槽的使用

vue插槽常用的分為三種 預設插槽 具名插槽和作用域插槽。1 預設插槽 child.vue slot div template father.vue 預設插槽 child div template import child from child.vue export default script 這...

Vue中插槽的使用

1.兩個元件 元件b h1 div template export default script style 元件a testb div template import testb from components testb export default script style 現在元件a的效果 ...