vue中的slot scope的使用

2021-10-01 14:12:54 字數 634 閱讀 4499

說之前 先說下什麼是內容分發  slot內容分發 父元件的內容和子元件的模板混在一起使用 就叫做內容分發

經常碰見的就是

vue.component("child",)

最後頁面只會顯示乙個hello world 正常裡面的hello vue.js是不會被渲染出發的

如果想讓渲染出來的話  就得使用內容分發 slot

vue.component("child",)
還有一種如果和父元件中先用到子元件中的資料 就需要用到 slot-scope

vue.component("child",}})

其實element-ui中 **中的也用到了這個 道理和上面的差不多

slot-scope="scope"scope可以獲取到 row, column, $index 和 store(table 內部的狀態管理)的資料

}

姓名: }

住址: }

編輯刪除

其實 這個還是屬於vue中插槽的相關知識   後來我也寫過相關的部落格 建議有興趣的童鞋可以了解了解

關注我 持續更新 前端知識   加油 努力奮鬥的前端小菜鳥

使用slot scope複製vue中slot內容

有時候我們的vue元件需要複製使用者傳遞的內容。比如我們工程裡面的輪播元件需要使用複製的slot來達到迴圈滾動的效果 使用者關注輪播內容的靜態效果,元件負責讓其滾動起來 元件 使用者 123這種實現方式對於初始化的資料是沒問題的,但是不支援slot內容的動態繫結,這是因為 因此當元件使用者在宣告節點...

Vue的slot scope的場景的個人理解

vue的插槽slot,分為3種 前兩種很好理解,無論就是子元件裡定義乙個slot佔位符,父元件呼叫時,在slot對應的位置填充模板就好了。作用域插槽的慨念,文件卻只有一句簡單的描述 有的時候你希望提供的元件帶有乙個可從子元件獲取資料的可復用的插槽。網路上大多數文章,也是千篇一律的翻譯這句話,可是僅憑...

Vue的slot scope的場景的個人理解

這篇文章不是單純把文件的話和api拿來翻譯和演示,而是談談我對於slot scope的使用場景的個人理解,如果理解錯誤,歡迎討論!vue的插槽slot,分為3種 前兩種很好理解,無論就是子元件裡定義乙個slot佔位符,父元件呼叫時,在slot對應的位置填充模板就好了。作用域插槽的慨念,文件卻只有一句...