資訊專欄INFORMATION COLUMN
摘要：組件是最強(qiáng)大的功能之一。組件的創(chuàng)建和注冊(cè)我們可以使用注冊(cè)一個(gè)全局組件。父組件的數(shù)據(jù)需要通過(guò)才能下發(fā)到子組件中。如果傳入的數(shù)據(jù)不符合要求，會(huì)發(fā)出警告。這對(duì)于開(kāi)發(fā)給他人使用的組件非常有用。
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。
組件的創(chuàng)建和注冊(cè)我們可以使用 Vue.component(tagName, options)注冊(cè)一個(gè)全局組件。
我們還可以通過(guò)某個(gè) Vue 實(shí)例/組件的實(shí)例選項(xiàng) components 注冊(cè)僅在其作用域中可用的組件，即局部組件。
如果想要傳遞一個(gè)變量到子組件中去，即傳給子組件的值會(huì)跟隨父組件中該變量的值的變化而變化，我們可以用 v-bind 來(lái)動(dòng)態(tài)地將 prop 綁定到父組件的數(shù)據(jù)。
我們還可以為組件的 prop 指定驗(yàn)證規(guī)則。如果傳入的數(shù)據(jù)不符合要求，Vue 會(huì)發(fā)出警告。這對(duì)于開(kāi)發(fā)給他人使用的組件非常有用。
自定義事件進(jìn)行組件通訊
現(xiàn)在我們父組件可以使用 prop 傳遞數(shù)據(jù)給子組件。但子組件怎么跟父組件進(jìn)行通信呢？這里我們可以通過(guò)自定義事件來(lái)實(shí)現(xiàn)。
具體點(diǎn)說(shuō)就是使用 $on(eventName) 監(jiān)聽(tīng)事件，使用 $emit(eventName, optionalPayload) 觸發(fā)事件。
使用插槽分發(fā)內(nèi)容{{ msg }}
為了讓組件可以自由組合，我們需要一種方式來(lái)混合父組件的內(nèi)容與子組件自己的模板。這個(gè)過(guò)程被稱為內(nèi)容分發(fā)。我們可以使用特殊的
如果子組件模板包含一個(gè)
子組件的標(biāo)題
只有在沒(méi)有要分發(fā)的內(nèi)容時(shí)才會(huì)顯示。 父組件的標(biāo)題
這是將會(huì)分發(fā)到子組件的一些初始內(nèi)容
父組件的標(biāo)題
子組件的標(biāo)題
這是將會(huì)分發(fā)到子組件的一些初始內(nèi)容
當(dāng)需要有多個(gè)插槽時(shí)，我們可以在
總結(jié)頭部標(biāo)題
主體內(nèi)容的一個(gè)段落。
尾部版權(quán)信息
頭部標(biāo)題
主體內(nèi)容的一個(gè)段落。
本節(jié)主要知識(shí)點(diǎn)是vue.js中組件的創(chuàng)建和注冊(cè)，父組件使用prop向子組件傳遞數(shù)據(jù)并進(jìn)行數(shù)據(jù)驗(yàn)證，使用自定義事件進(jìn)行組件間的通訊，使用插槽來(lái)使組件可以自由組合。vue.js組件是vue框架中最強(qiáng)大的功能，學(xué)完后相信你對(duì)web組件化也會(huì)有一定的了解了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104515.html
摘要：的核心庫(kù)只關(guān)注視圖層，易于上手，便于與第三方庫(kù)或既有項(xiàng)目整合。全局注冊(cè)全局注冊(cè)組件我的組件創(chuàng)建根實(shí)例渲染后的我的組件總結(jié)本節(jié)學(xué)習(xí)的核心知識(shí)點(diǎn)莫過(guò)于模板渲染表單綁定事件處理組件化這幾點(diǎn)了，下面我們針對(duì)每一個(gè)知識(shí)點(diǎn)細(xì)細(xì)學(xué)習(xí)。 Vue.js是什么 Vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。Vue.js的核心庫(kù)只關(guān)注視圖層，易于上手，便于與第三方庫(kù)或既有項(xiàng)目整合。Vue.js與現(xiàn)代化的工...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：工程實(shí)踐立足實(shí)踐，提示實(shí)際水平內(nèi)聯(lián)函數(shù)與性能很多關(guān)于性能優(yōu)化的文章都會(huì)談及內(nèi)聯(lián)函數(shù)，其也是常見(jiàn)的被詬病為拖慢性能表現(xiàn)的元兇之一不過(guò)本文卻是打破砂鍋問(wèn)到底，論證了內(nèi)聯(lián)函數(shù)并不一定就會(huì)拖慢性能，過(guò)度的性能優(yōu)化反而會(huì)有損于應(yīng)用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...
閱讀 1693·2021-11-19 09:40
閱讀 2944·2021-09-24 10:27
閱讀 3230·2021-09-02 15:15
閱讀 1893·2019-08-30 15:54
閱讀 1215·2019-08-30 15:54
閱讀 1381·2019-08-30 13:12
閱讀 645·2019-08-28 18:05
閱讀 2816·2019-08-27 10:53
