使用slot scope複製vue中slot內容

2021-09-28 04:38:10 字數 563 閱讀 4317

有時候我們的vue元件需要複製使用者傳遞的內容。

比如我們工程裡面的輪播元件需要使用複製的slot來達到迴圈滾動的效果

使用者關注輪播內容的靜態效果,元件負責讓其滾動起來

元件:

使用者:

123

這種實現方式對於初始化的資料是沒問題的,但是不支援slot內容的動態繫結,這是因為

因此當元件使用者在宣告節點時,因為只宣告了乙個div,後台只生成了1個vnode,最終雖然產生了2個div,但是vnode只和後面1個dom繫結了,當vnode修改時也只會修改1個dom

解法:slot-scope

使用slot-scope資料產生的每個slot都會產生乙個新的vnode

元件:

使用者:

這種情況下component內容有改動,那麼元件內容2個slot都會同步更新

專案使用的vue版本是2.4.2,更高階的vue的slot-scope語法可能不太一樣

更多專業前端知識,請上

【猿2048】www.mk2048.com

vue中的slot scope的使用

說之前 先說下什麼是內容分發 slot內容分發 父元件的內容和子元件的模板混在一起使用 就叫做內容分發 經常碰見的就是 vue.component child 最後頁面只會顯示乙個hello world 正常裡面的hello vue.js是不會被渲染出發的 如果想讓渲染出來的話 就得使用內容分發 s...

Vue 框架與庫的區別 MVVM 簡單使用vue

庫 本質上是一些函式的集合。每次呼叫函式,實現一定的特定的功能,接著把控制權交給使用者 代表 jquery jquery庫核心 dom操作,即 封裝dom操作,簡化dom操作 框架 是一套完整的解決方案,使用框架的時候,需要把你的 放到框架適合的地方,框架會在合適的實際呼叫你的 代表 vue 使用規...

vue ui框架 你為什麼要使用前端框架Vue

1.前端框架的根本意義 1.1 前端框架的好處 最開始學習前端框架的時候 我第乙個框架是 react 並不理解框架能帶來什麼,只是因為大家都在用框架,最實際的乙個用途就是所有企業幾乎都在用框架,不用框架就 out 了.隨著使用的深入我逐漸理解到框架的好處 1.2 前端框架的根本意義 簡單來說,前端框...