理解vue中的組件（一）

JasonZhang 發布于2019-08-20 16:09 / 3014人閱讀

摘要：組件是中很重要，這部分也是最難理解的，先聊一聊中的組件。語法組件名選項對象來定義一個下拉框組件請選擇北京上海杭州組件的名字就為，在模板中使用組件請選擇北京上海杭州在模板中使用組件和正常標簽一樣。

看了Vue的文檔，寫得很簡潔，但是并不簡單。在自己學習的過程中踩過不少的坑，學習的時候把官網的例子從頭到尾做了一遍，記錄在github中https://github.com/WYseven/vue2-basic-demo/tree/master/vue-demo，學習中也有自己的心得體會，記錄下來分享，希望對你的理解有所幫助。

組件是vue中很重要，這部分也是最難理解的，先聊一聊vue中的組件。

組件是什么

在vue中組件是一個自定義元素，vue的編譯器為它添加特殊功能；組件也可以是原生的html元素，使用特殊的is來擴展。

看完之后，比較懵吧？咱們慢慢解開組件的神秘面紗，先從一段布局開始說起。

試想在布局中的一個場景，自定義一個下拉框，需要先定義一個基本的結構：


    請選擇：
    
        北京
        上海
        杭州
    



    請選擇：
    
        博士
        研究生
        本科

定義好一個基本結構后，如果要再次使用，復制一份結構改變數據即可。這樣復制粘貼的做法沒什么毛病，但忽略一個問題---如果要修改下拉框的結構。就會變得難以維護了。

假如我對這個結構不是很滿意，我要把p標簽改為span標簽，使用到下拉框的結構都要改，那可要修改很多地方。如果我要給結構中ul添加一個class，使用給到下拉框的地方都要修改，也要修改很多地方。這樣維護起來超級的麻煩。

能不能只寫一套結構，然后復用，類似于JavaScript中要復用多行代碼，可以封裝成一個函數，在使用時只需要調用函數，無需重復寫多行代碼？答案是當然可以。

在JavaScript中封裝的是一個函數，然后調用。那么在html中就不能是函數了，而要定義成標簽，但要避開w3c規定的標簽，采用自定義標簽。

如果有一個自定義標簽< custom-select>代表的就是自定義的下拉框，那么在需要使用下拉框的時候，只需要這樣來寫：

是不是變得精簡很多？

對于自定義標簽名字，可以參考W3C規定

這樣只是一個自定義標簽而已，瀏覽器并不會解析為自定義的下拉框結構。我們真是的目的是要讓< custom-select>自定義標簽代表一段HTML結構，也就是在瀏覽器中展示的是自定義下拉框結構。

寫上自定義標簽：

最終會被解析為以下結構才是我們想要的。


    請選擇：
    
        北京
        上海
        杭州

當使用vue時，解析的這個過程就交給Vue來做。

以上舉例中自定義標簽< custom-select>其實就是一個組件，vue的編譯器為它添加特殊功能，最終會呈現我們定義的結構。

我們是從布局結構重復使用引出要使用組件，當然組件還遠遠不止這些，它還有其他的功能等著去探索。

定義組件

在vue中定義組件非常簡單，使用Vue構造函數下的component函數，即可定義組件。

語法：

Vue.component(組件名, 選項對象)

來定義一個下拉框組件：

Vue.component("custom-select", {
    template: `
        
            請選擇：
            
                北京
                上海
                杭州
            
        
    `
})

組件的名字就為custom-select，在模板中使用組件：

在模板中使用組件和正常標簽一樣。

云服務器 GPU云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82756.html

理解vue中的組件（二）

摘要：往往定義組件的構造器后，不需要手動的進行初始化，而是在其他組件的模板中當成標簽來使用，這時候需要調用注冊成組件。這樣設計的目的是防止從子組件意外改變父級組件的狀態，從而導致應用的數據流向難以理解。上節說到組件https://segmentfault.com/a/1190000009236700，這一節繼續來學習組件：原文博客地址，歡迎學習交流:點擊預覽從github上獲取本文代碼：...

Nino 2019-08-23 12:11 評論0 收藏0
Vue.js學習

摘要：一基礎學習模式下圖不僅概括了模式，還描述了在中是如何和以及進行交互的。關于這一點我們將在后續反應系統中討論。父組件通過向下傳遞數據給子組件，子組件通過給父組件發送消息。這個對象必須是普通對象原生對象，及原型屬性會被忽略。 Vue.js 是用于構建交互式的 Web 界面的庫。Vue.js 提供了 MVVM 數據綁定和一個可組合的組件系統，具有簡單、靈活的 API。其實和Jquery一樣...

TIGERB 2019-08-21 14:15 評論0 收藏0
vue的生命周期解析并通過表單理解MVVM（不僅理論，圖文并茂）

摘要：在前端頁面中，把用純對象表示，負責顯示，兩者做到了最大限度的分離。的顯示與否和的布爾值有關，還是只關注數據的變化。兩個組件的布爾值通過兩個臨近的按鈕控制，初始值和的結果都是。組件的聲明在組件上，則完全沒有進入生命周期。開始前說一說吐槽首先，文章有謬誤的地方，請評論，我會進行驗證修改。謝謝。 vue真是個好東西，但vue的中文文檔還有很大的改進空間，有點大雜燴的意思，對于怎么...

silvertheo 2019-08-22 14:56 評論0 收藏0
深入理解vue中的slot與slot-scope

摘要：具名插槽可以在一個組件中出現次。出現在不同的位置。這個稍微難理解一點。使用非常方便，是基于搭建工程。地址點這里最后如果本文對你理解和有幫助，請不要吝嗇手中的點贊喲。作者/云荒杯傾寫在前面 vue中關于插槽的文檔說明很短，語言又寫的很凝練，再加上其和methods，data，computed等常用選項使用頻率、使用先后上的差別，這就有可能造成初次接觸插槽的開發者容易產生算了吧，回頭再...

wayneli 2019-08-22 14:02 評論0 收藏0