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