vue 插槽的使用總結 自己的感悟總結

2021-10-09 12:25:11 字數 790 閱讀 6355

是 vue 一種內容分發機制, 將 slot 元素作為 承載分發內容的出口(vue 實現的一套內容分發的 api);

或者是

子元件中有乙個沒有屬性的 slot 標籤的時候,父元件呼叫時,將整個內容片段插到 slot 所在的 dom 位置,替換掉 slot 標籤本身;如果沒有 slot 標籤,父元件呼叫時,內部的**片段將會被丟棄

components:

}

給插槽取名,通過 template 標籤將需要分發的內容進行包裹,並且通過 v-slot:插槽名,實現定向分發;

如果乙個元件中需要使用多個插槽的時候,那麼就需要使用具名插槽。

vue.component("child",)

}

主要是為了讓插槽內容能夠訪問到子元件中才有的資料;

分發內容時使用子元件中的資料 ,此時使用作用域插槽 在定義slot的同時,新增自定義屬性,用於傳參新增的所有自定義屬性,都會以屬性的方式新增到新的物件中,物件存在templatev-slot:weather(插槽名)=""屬性裡可以通過等號接收

預設插槽傳遞資料,則使用v-slot:default=""

vue.component("child", }

`,data()

}})

vue插槽的使用

什麼是插槽?插槽 slot 是 vue 提出來的乙個概念,正如名字一樣,插槽用於決定將所攜帶的內容,插入到指定的某個位置,從而使模板分塊,且具有模組化的特質和更大的重要性,插槽顯不顯示 怎樣顯示是由父元件來控制的,而插槽在 顯示就由子元件來進行控制 用 slot 元素將不同的dom 樹組合在一起,s...

vue插槽的使用

父元件 父元件 呼叫子元件 color red 我預設插槽內容 p slotone1 div 子元件 vue.component soltonel 乙個元件中只能有乙個預設插槽。相對應的,具名插槽就可以有很多個,只要名字 name屬性 不同就可以了 父元件 父元件 呼叫子元件 footer styl...

Vue 插槽的使用

專案中具名插槽使用的較多。封裝的通用提示元件,如 上圖截的是登出提示,有的時候不同的情況下提示元件的提示內容不一樣,這就要根據具體情況更改 元件中的text內容 首先父元件使用prompt子元件 在向具名插槽提供內容的時候,我們可以在乙個元素上使用v slot指令,並以v slot的引數的形式提供其...