是 vue 一種內容分發機制, 將 slot 元素作為 承載分發內容的出口(vue 實現的一套內容分發的 api);
或者是
子元件中有乙個沒有屬性的 slot 標籤的時候,父元件呼叫時,將整個內容片段插到 slot 所在的 dom 位置,替換掉 slot 標籤本身;如果沒有 slot 標籤,父元件呼叫時,內部的**片段將會被丟棄
components:
}
給插槽取名,通過 template 標籤將需要分發的內容進行包裹,並且通過 v-slot:插槽名,實現定向分發;
如果乙個元件中需要使用多個插槽的時候,那麼就需要使用具名插槽。
vue.component("child",)
}
主要是為了讓插槽內容能夠訪問到子元件中才有的資料;
分發內容時使用子元件中的資料 ,此時使用作用域插槽 在定義slot
的同時,新增自定義屬性,用於傳參新增的所有自定義屬性,都會以屬性的方式新增到新的物件中,物件存在
template
中v-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的引數的形式提供其...