vue3 插槽作用域的使用

當我們在父元件定義了乙個陣列,

data() 

}

props: 

}

<

template 
v-for
="(item,index) in names"
:key
="item"
>
<
slot 
>
slot
>
template
>

比如說我們想要在父元件想使用子元件的item和index的內容將他渲染到html上,如果我們直接使用

<

div>
<
show-names 
:names
="name"
>
<
button
>}
button
>
show-names>
div>

我們可以這樣做,通過作用域插槽的方式來解決

子元件中使用v-bind繫結item和index

<

template 
v-for
="(item,index) in names"
:key
="item"
>
<
slot 
:item
="item"
:index
="index"
>
slot
>
template
>

這裡的v-slot="slotprops"是簡寫形式,因為我們在子元件的slot中沒有定義name屬性,所以這個slot會有乙個預設的name為default,

比方說我們在子元件中定義乙個name="lkx",那麼父元件中的寫法就變成v-slot:lkx="slotprops",又因為v-slot:的語法糖是#,所以父元件最終寫為#lkx="slotprops"

<

template
>
<
div>
<
show-names 
:names
="name"
>
<
template 
v-slot
="slotprops"
>
<
button
>}
button
>
template
>
show-names
>
div>
template
>

<

show-names 
:names
="name"
v-slot
="lkx"
>
<
button
>}--}
button
>
show-names
>

vue 插槽作用域的使用

父元件想要在自個的模板中使用子元件的data資料，有3種方式 1.子元件傳送事件 主動方是子元件 2.父元件獲取子元件的物件，通過this.childredn或refs，但這種方式大多是用在scirpt 裡面，在template模板中並不適用 3.插槽作用域的方式獲取，該方式能在template模板...

Vue作用域插槽

root 父元件呼叫子元件的時候，給子元件傳了乙個插槽 這個插槽叫作用域插槽 作用域插槽必須以 template開頭和結尾 同時這個插槽要宣告 你要從子元件接收的資料都放在哪 這裡是放在props裡面了 還要告訴子元件模板的資訊 即接收的props怎麼展示資料 props tony h4 templ...

Vue作用域插槽

doctype html en utf 8 編譯作用域 title script head isshow cpn div cpn 我是子元件 h2 我是子元件的內容 p isshow 按鈕 button div template newvue components script body html ...