Vue插槽的用法詳情講解

2021-10-21 20:42:34 字數 1741 閱讀 2003

vue插槽的用法

vue中的 三種插槽分別為 匿名插槽,命名插槽,作用域插槽。

1 .匿名插槽

子元件

>

>

>

slot

>

div>

template

>

父元件(記得引入元件)

>

>

我是子元件裡面的slot內容>

children

>

2 . 命名插槽

子元件

name

="dada"

>

slot

>

父元件(記得引入子元件)

注意:父元件的slot=「某乙個值」 一定要和子元件的name=「某乙個值」一模一樣

>

slot

="dada"

>

dasdasdsali

>

children

>

3.作用域插槽

第一種方法

子元件

"dadadsadsa"

:up=

"name"

>

<

/slot>

data()

},

父元件

注意v-slot:某乙個值=「名字」 某乙個值一定要和子元件的name=「某乙個值」一模一樣

>

v-slot:dadadsadsa

="ts"

>

}template

>

children

>

第二種方法

子元件

"tusi"

>

<

/slot>

export

default},

}

父元件

>

slot-scope

="scope"

>

>

}div

>

template

>

children

>

第三種方法

子元件

name

="dididsadsadsa"

down

="123"

>

slot

>

父元件

v-slot:dididsadsadsa

="tsdsadsad"

>

} //瀏覽器顯示123

template

>

父元件

>

slot-scope

="scope"

>

>

}div

>

template

>

children

>

vue插槽的用法

vue插槽有兩種 具名插槽和作用域插槽,2.6.0以後,使用新語法v slot指令 縮寫為 將兩種語法統一起來。老舊的語法,這裡不再贅述,參見vue官網。下面講講新語法的用法。v slot slotname slotprops template current user name slotname ...

Vue插槽slot的用法

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

vue插槽slot的用法

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