深入了解vue自定義元件之插槽slot

2021-09-27 06:45:19 字數 976 閱讀 6978

vue插槽官方文件位址

vue中,自定義元件一般只需要新建乙個vue模板檔案,根據需求定義元件樣式即可,如下

自定義元件檔案 mycomponent.vue

}

引用部分

這樣就可以子定義乙個一般的元件

但是好多時候我們需要在自定義的元件放入其他div或者其他元件

修改引用部分,自定義元件加入乙個p標籤

vue is awesome

但是這並不會達到預期的效果。

這個時候就會用到vue中的slot插槽

修改自定義元件mycomponent.vue:

}

頁面展示:

還可以加入多個插槽

修改自定義元件mycomponent.vue,加入多個插槽

}

修改引用部分:

vue is awesome

of course

頁面展示:

通過slot的name屬性給插槽命名,使用的時候使用v-slot命令就可以把模板繫結到指定名稱的插槽。

如果slot沒有命名,會自動命名為default。

同樣的在使用的時候沒有通過v-slot指定插槽的名字,會自動繫結到名為default的插槽。

Vue深入了解元件(三) 自定義事件

監聽事件和prop屬性名稱方面不太一樣,prop屬性名若是駝峰命名,在元件呼叫賦值的時候需要改為key base的樣式,但是監聽事件的不會,寫啥是啥。元件中的觸發 this emit myevent 呼叫時的監聽 沒有效果 dosomething my component 有效果的 dosometh...

vue自定義元件,插槽,自定義事件

vue.component 自定義元件名 自定義模板 裡面套html標籤,可以取屬性的值 vue.component lover new vue script lover div 自定義元件模板 bitqian標籤 vue.component bitqian new vue script v for...

vue之自定義元件

在vue專案中怎麼自定義元件呢?在網上都到的都是引用vue.js這種的,原生的vue自定義元件方式如下 1 元件假如為a.vue,和引用它的b.vue在同一級的資料夾下 2 在b.vue中寫入的script內部寫入 import star a from a.vue export default 然後...