Vue難點!官方示例太抽象了,我得捋一捋

隨著前後端開發的分離,Node的發展促使前端項目跟後端一樣工程化。JQuery等直接操作dom的js庫被拋棄。React、Angular、Vue等前端框架提出了新的前端理論架構和概念,如MVVM、數據驅動、虛擬DOM、雙向綁定等。

我們先不講JQuery是否過時,但是我們還是要帶著發展的眼光看問題,先跟上時代的腳步。

Vue難點!官方示例太抽象了,我得捋一捋

Vue

這三大前端框架,其中屬Vue最容易上手。對於剛接觸那些新概念的我來說,還是很容易吸收接受。

Vue中有許多黑科技,其中有一個點還是比較難理解的。

作用域插槽

Vue難點!官方示例太抽象了,我得捋一捋

子組件代碼

Vue難點!官方示例太抽象了,我得捋一捋

父組件代碼

該API的應用場景主要是為了在父組件當中決定子組件中的數據的展示方式,所以在子組件中定義的items數組,在父組件中通過聲明slot-scope引用子組件中的items,但是官方也指出該API不支持雙向綁定。所以在子組件中改變items的值不會導致重新渲染。

Vue難點!官方示例太抽象了,我得捋一捋

結果

demo地址:https://github.com/CheeseC/vue-scoped-slot-demo

官方示例:

Vue難點!官方示例太抽象了,我得捋一捋

示例

主要參考:https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD

總結一下:作用域插槽特性主要是滿足在父組件當中決定子組件中的數據的展示方式。


分享到:


相關文章: