vue中v solt插槽的使用

2021-10-09 17:02:58 字數 1048 閱讀 4493

使用插槽分成兩步。

第一步 在元件元素內。為其它元素設定插槽名稱。

通過slot屬性設定。

第二步 在元件模板中,通過slot元件,使用這些元素。

通過name屬性指令插槽名稱

如果沒有設定name屬性,缺省會使用剩餘的元素。

使用插槽的時候,缺省會引入slot屬性所在的元素,

不想引入該元素,我們可以使用template模板元素。

使用template模板元素的時候,在新版本中,建議用v-slot指令代替slot屬性

此時為插槽定義名稱的語法是冒號語法。

v-slot:名稱

注意:該指令不能給普通元素使用,如div,h1,span等。

只能給元件和template元素使用。

import vue from 'vue';

// 第二個子元件

let home = vue.extend()

// vue例項化物件

new vue(,

// 容器

// 資料

data: {}

})作用域是指:在插槽中使用的資料儲存在**。

預設在插槽中,使用的資料是父元件中的資料(插槽使用的元素,是在父元件模板中定義的)。

在插槽元素中,使用子元件中的資料分成兩步。

第一步 為slot元件,傳遞子元件的資料

動態傳遞資料,使用v-bind指令

第二步 為v-slot指令賦值,定義接收資料的命名空間(作用域名稱)

接收的資料,駝峰式命名

此時在元素中,通過該命名空間,可以使用傳遞的資料,

v-slot指令語法糖是#。

import vue from 'vue';

// 第二個子元件

let home = vue.extend(

}})// vue例項化物件

new vue(,

// 容器

// 資料

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的效果 ...