vue中的插槽的使用

2022-03-21 01:34:45 字數 844 閱讀 1308

匿名插槽就是可以在父元件中的子元件的標籤中直接新增內容

子元件a:

我是a元件中的對話方塊

父元件:(在元件外, 我們可以往插槽裡填入任何元素,dialog-a為元件的名稱)

// 只有子元件中使用了slot才能成功在此標籤中新增內容

按鈕// ... 可以是任何元素

具名插槽就是乙個擁有name屬性的插槽,具名插槽可以在同一元件中多次使用。

子元件a:

我是a元件中的對話方塊 // 具名插槽

// 具名插槽

//匿名插槽

父元件:(在元件外, 我們可以往插槽裡填入任何元素,dialog-a為元件的名稱)

沒有slot屬性的html模板預設關聯匿名插槽。

按鈕

按鈕按鈕

作用域插槽就是乙個可以攜帶資料的具名插槽,稱為作用域插槽。

子元件a:

我是a元件中的對話方塊 // 作用域插槽

// 具名插槽

// 具名插槽

//匿名插槽

父元件:(在元件外, 我們可以往插槽裡填入任何元素,dialog-a為元件的名稱)

沒有slot屬性的html模板預設關聯匿名插槽。

// 作用域插槽

}

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