Vue元件化之插槽

2022-04-18 04:37:42 字數 1210 閱讀 1505

類似電腦的usb,使用介面給電腦增加不同的功能,鍵盤/音響,而不是直接在元件裡新增

介紹:

預設自定義標籤內不允許新增內容,而插槽可以讓我們在內部新增內容

封裝方法:

抽取共性,保留不同。

使用方法:

直接在template中插入slot空標籤,即可在自定義標籤中插入內容,內容會自動替換空slot

元件標籤中插入的無論插入多少值,都會一起作為替換元素替換slot

如果在slot中新增預設值,元件標籤中沒有插入內容則顯示預設值

預設顯示我

當有多個插槽時,我們只想替換其中乙個,就需要用到具名插槽了

// cpn.vue

myslot

newslot

替換方式一:我替換了myslot

替換方式二:

我替換了newslot

父元件模板的所有東西都會在父級作用域內編譯;

子元件模板的所有東西都會在子級作用域內編譯。

通俗點講:看標籤的父元件,標籤是在父元件中實現的,

那麼作用域就是父元件,屬性也是父元件的屬性

//isshow=true

data:,

components:}},

}})

在當前作用域中的插槽中,只能引用當前元件的data。

如何在父元件中拿到子元件的資料?

首先在slot中命名接收屬性的key(如newdata),並動態繫結子元件data

//子元件cpn

在vue例項中通過template接收(兩種方式)

我們都知道當使用插槽時,自定義標籤中的內容會替換插槽。但我們想要給插槽設定樣式該怎麼做呢?

使用div包裹插槽,給div設定樣式,利用cs繼承特性,被替換的插槽也就有了樣式

vue元件開發之元件插槽

作用 父元件向子元件傳遞內容 插槽位置 vue.component alert box 具名插槽定義 就是有名字的插槽 定義name header slot 內容solt header 內容h1 沒有名稱的話就匹配到沒有name屬性的插槽中 還可以使用template標籤進行使用 template只...

Vue元件化高階 slot插槽

元件的插槽 如何封裝合適?抽取共性,保留不同 插槽的基本使用 在template內部定義標籤 插槽的預設值 預設值 如果在父模板中,有多個值同時放入到元件中進行替換,將會一起作為替換元素 哈哈哈 span cpn 用span替換template中slot插槽裡內容 hehehe i cpn cpn ...

Vue元件插槽

三 具名插槽 命名插槽 補充當我們使用vue元件時,常常遇到子元件的部分布局在不同的路由元件上表現不同的情況,vue為了幫助我們開發者解決這個問題,新增了插槽這個功能 插槽即佔位符 實現元件在不同父元件中使用,內部可以有不一樣 塊 html 如下 示例 如下 示例 當乙個子元件內,需要多個插槽時,需...