資訊專欄INFORMATION COLUMN
摘要：組件是中很重要，這部分也是最難理解的，先聊一聊中的組件。語法組件名選項對象來定義一個下拉框組件請選擇北京上海杭州組件的名字就為，在模板中使用組件請選擇北京上海杭州在模板中使用組件和正常標(biāo)簽一樣。
看了Vue的文檔，寫得很簡潔，但是并不簡單。在自己學(xué)習(xí)的過程中踩過不少的坑，學(xué)習(xí)的時候把官網(wǎng)的例子從頭到尾做了一遍，記錄在github中https://github.com/WYseven/vue2-basic-demo/tree/master/vue-demo，學(xué)習(xí)中也有自己的心得體會，記錄下來分享，希望對你的理解有所幫助。
組件是vue中很重要，這部分也是最難理解的，先聊一聊vue中的組件。
組件是什么在vue中組件是一個自定義元素，vue的編譯器為它添加特殊功能；組件也可以是原生的html元素，使用特殊的is來擴展。
看完之后，比較懵吧？咱們慢慢解開組件的神秘面紗，先從一段布局開始說起。
試想在布局中的一個場景，自定義一個下拉框，需要先定義一個基本的結(jié)構(gòu)：
請選擇：
- 北京
- 上海
- 杭州
請選擇：
- 博士
- 研究生
- 本科
定義好一個基本結(jié)構(gòu)后，如果要再次使用，復(fù)制一份結(jié)構(gòu)改變數(shù)據(jù)即可。這樣復(fù)制粘貼的做法沒什么毛病，但忽略一個問題---如果要修改下拉框的結(jié)構(gòu)。就會變得難以維護了。
假如我對這個結(jié)構(gòu)不是很滿意，我要把p標(biāo)簽改為span標(biāo)簽，使用到下拉框的結(jié)構(gòu)都要改，那可要修改很多地方。如果我要給結(jié)構(gòu)中ul添加一個class，使用給到下拉框的地方都要修改，也要修改很多地方。這樣維護起來超級的麻煩。
能不能只寫一套結(jié)構(gòu)，然后復(fù)用，類似于JavaScript中要復(fù)用多行代碼，可以封裝成一個函數(shù)，在使用時只需要調(diào)用函數(shù)，無需重復(fù)寫多行代碼？答案是當(dāng)然可以。
在JavaScript中封裝的是一個函數(shù)，然后調(diào)用。那么在html中就不能是函數(shù)了，而要定義成標(biāo)簽，但要避開w3c規(guī)定的標(biāo)簽，采用自定義標(biāo)簽。
如果有一個自定義標(biāo)簽< custom-select>代表的就是自定義的下拉框，那么在需要使用下拉框的時候，只需要這樣來寫：
是不是變得精簡很多？
對于自定義標(biāo)簽名字，可以參考W3C規(guī)定
這樣只是一個自定義標(biāo)簽而已，瀏覽器并不會解析為自定義的下拉框結(jié)構(gòu)。我們真是的目的是要讓< custom-select>自定義標(biāo)簽代表一段HTML結(jié)構(gòu)，也就是在瀏覽器中展示的是自定義下拉框結(jié)構(gòu)。
寫上自定義標(biāo)簽：
最終會被解析為以下結(jié)構(gòu)才是我們想要的。
請選擇：
- 北京
- 上海
- 杭州
當(dāng)使用vue時，解析的這個過程就交給Vue來做。
以上舉例中自定義標(biāo)簽< custom-select>其實就是一個組件，vue的編譯器為它添加特殊功能，最終會呈現(xiàn)我們定義的結(jié)構(gòu)。
我們是從布局結(jié)構(gòu)重復(fù)使用引出要使用組件，當(dāng)然組件還遠遠不止這些，它還有其他的功能等著去探索。
定義組件在vue中定義組件非常簡單，使用Vue構(gòu)造函數(shù)下的component函數(shù)，即可定義組件。
語法：
Vue.component(組件名, 選項對象)
來定義一個下拉框組件：
Vue.component("custom-select", {
template: `
請選擇：
- 北京
- 上海
- 杭州
`
})
組件的名字就為custom-select，在模板中使用組件：
在模板中使用組件和正常標(biāo)簽一樣。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82756.html
摘要：往往定義組件的構(gòu)造器后，不需要手動的進行初始化，而是在其他組件的模板中當(dāng)成標(biāo)簽來使用，這時候需要調(diào)用注冊成組件。這樣設(shè)計的目的是防止從子組件意外改變父級組件的狀態(tài)，從而導(dǎo)致應(yīng)用的數(shù)據(jù)流向難以理解。 上節(jié)說到組件https://segmentfault.com/a/1190000009236700，這一節(jié)繼續(xù)來學(xué)習(xí)組件： 原文博客地址，歡迎學(xué)習(xí)交流:點擊預(yù)覽從github上獲取本文代碼：...
摘要：一基礎(chǔ)學(xué)習(xí)模式下圖不僅概括了模式，還描述了在中是如何和以及進行交互的。關(guān)于這一點我們將在后續(xù)反應(yīng)系統(tǒng)中討論。父組件通過向下傳遞數(shù)據(jù)給子組件，子組件通過給父組件發(fā)送消息。這個對象必須是普通對象原生對象，及原型屬性會被忽略。 Vue.js 是用于構(gòu)建交互式的 Web 界面的庫。Vue.js 提供了 MVVM 數(shù)據(jù)綁定和一個可組合的組件系統(tǒng)，具有簡單、靈活的 API。 其實和Jquery一樣...
摘要：在前端頁面中，把用純對象表示，負責(zé)顯示，兩者做到了最大限度的分離。的顯示與否和的布爾值有關(guān)，還是只關(guān)注數(shù)據(jù)的變化。兩個組件的布爾值通過兩個臨近的按鈕控制，初始值和的結(jié)果都是。組件的聲明在組件上，則完全沒有進入生命周期。 開始前說一說 吐槽 首先， 文章有謬誤的地方， 請評論， 我會進行驗證修改。謝謝。 vue真是個好東西，但vue的中文文檔還有很大的改進空間，有點大雜燴的意思，對于怎么...
摘要：具名插槽可以在一個組件中出現(xiàn)次。出現(xiàn)在不同的位置。這個稍微難理解一點。使用非常方便，是基于搭建工程。地址點這里最后如果本文對你理解和有幫助，請不要吝嗇手中的點贊喲。 作者/云荒杯傾 寫在前面 vue中關(guān)于插槽的文檔說明很短，語言又寫的很凝練，再加上其和methods，data，computed等常用選項使用頻率、使用先后上的差別，這就有可能造成初次接觸插槽的開發(fā)者容易產(chǎn)生算了吧，回頭再...
閱讀 2072·2021-11-12 10:36
閱讀 1949·2021-11-09 09:49
閱讀 2644·2021-11-04 16:12
閱讀 1189·2021-10-09 09:57
閱讀 3276·2019-08-29 17:24
閱讀 1945·2019-08-29 15:12
閱讀 1308·2019-08-29 14:07
閱讀 1318·2019-08-29 12:53
