Vue插槽總結

2022-10-08 17:42:12 字數 417 閱讀 8296

由於各大基於vue開發的框架使用slot情景非常多所以在此總結以便以後查閱

基本概念:父元件向子元件傳遞內容

場景:在父元件頁面中引入子元件,子元件標籤內寫入內容是無法顯示的,在子元件內定義slot標籤=>作為子元件內容的出口。

此時在父元件寫入的子元件的標籤內寫入的內容就可以顯示了

實現原理:待補充

預設插槽:父元件傳入的值可以覆蓋子元件slot標籤內定義的預設值

具名插槽:乙個子元件有不同的插槽,如何區分插槽,顯示不同的內容=>插槽獨有化 =>定義name  '  

父元件如何接受name=>

作用域插槽:子元件想要向父元件傳值  

子元件父元件使用資料: strdata.str.屬性名

可以使用具名插槽定義多個slot  具體用法就是把default改為name名字

vue插槽樣式 vue基礎之插槽

categories vue基礎 tags 插槽element ui 插槽slot 插槽 vue內建元件 做為承載分發內容的出口 普通插槽 插槽使用 全域性元件 第乙個引數是元件名,第二個引數是options vue.component vbtn template 我是頭部元件 var vconte...

Vue 特性插槽slot 用法總結

vue的一些特性和方法學習,說一千道一萬不如乙個例子帶來的直觀,下面就是乙個完整的例子來總結 slot各種型別的插槽用法 關於slot這個特性,理解起來要注意幾點 1 slot這個特性設計的目的就是讓子元件能非常方便在父元件上進行擴充套件,子元件的最終頁面呈現極大程度依然于父元件下面的模板如何寫。2...

具名插槽和匿名插槽 vue 插槽

插槽就是子元件中的提供給父元件使用的乙個佔位符,用 表示,父元件可以在這個佔位符中填充任何模板 如 html 元件等,填充的內容會替換子元件的標籤。1.插槽 建立slots.vue 主檔案引入 原生效果 插槽效果。這樣在中間可以巢狀內容 這裡的內容會被插入到slots中顯示 我是插槽 2.預設插槽 ...