小編給大家分享一下vue.js組件化指的是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)專注于虹口企業(yè)網(wǎng)站建設,自適應網(wǎng)站建設,購物商城網(wǎng)站建設。虹口網(wǎng)站建設公司,為虹口等地區(qū)提供建站服務。全流程按需制作，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

vue.js組件化用于將UI頁面分割為若干組件進行組合和嵌套；組件化是一種高效的處理復雜應用系統(tǒng)，更好的明確功能模塊作用的方式；目的是為了解耦，把復雜系統(tǒng)拆分成多個組件，分離組件邊界和責任，便于獨立升級和維護。

Vue 是一套用于構(gòu)建用戶界面的漸進式框架。它有著如下特點：

漸進式框架，采用自底向上增量開發(fā)設計

模版雙向綁定機制

利用指令（directive）對 DOM 進行封裝

組件化設計思想

Vue 的組件化將 UI 頁面分割為若干組件進行組合和嵌套。

Vue 組件化

組件化是一種高效的處理復雜應用系統(tǒng)，更好的明確功能模塊作用的方式。目的是：為了解耦，把復雜系統(tǒng)拆分成多個組件，分離組件邊界和責任，便于獨立升級和維護。

組件化的好處不用一一細說大家都知道了，組件是 Vue.js 最強大的功能之一，讓我們用獨立可復用的小組件來構(gòu)建大型應用，開發(fā)效率更快更敏捷。

為了更好地復用，這里以建立彈窗組件為實例，談談如何建立一個項目的組件庫。

Vue 組件規(guī)范化

沒有規(guī)矩，難成方圓。

要搭建一個好的組件庫，應該一開始要定下一些通用的規(guī)矩。

1. 命名

組件的命名應該與業(yè)務無關(guān)，而是根據(jù)組件實現(xiàn)的功能來進行命名。同時，也應該與業(yè)務文件命名區(qū)分開來，可以加一些特有的前綴。例如在這里，所有組件前綴都添加 “UI” ，彈窗組件命名為 “UIDialog”。

2. 實現(xiàn)

可復用組件實現(xiàn)的應該是通用的功能，它實現(xiàn)的應該是：

UI 的展示

與用戶的交互（事件）

動畫效果

可復用組件應盡量減少對外部條件的依賴。一個獨立的功能組件，最好不要拆成若干個小組件來實現(xiàn)。

3. 理解組件屬性和事件

在 Vue 組件里，狀態(tài)稱為 props，事件稱為 events，片段稱為 slots。

props 允許外部環(huán)境傳遞數(shù)據(jù)給組件。

通過 props 來聲明自己的屬性?？梢酝ㄟ^上文 dialog/index.vue 代碼進行理解。它的 type 即類型有：String、Number、Boolean、Array、Object、Date、Function、Symbol。

events 允許組件出發(fā)外部環(huán)境的副作用。

可以通過用 v-on 來監(jiān)聽 Dom 事件。語法：v-on:事件類型=“事件處理函數(shù)名”?？s寫為： @事件類型=“事件處理函數(shù)名”。

一個直觀的例子是：

<ulid="app">
<liv-on:click="clickMe">單擊事件</li>
</ul>
<script>
var app = new Vue({
el : '#app',
data : {
},
methods : {
clickMe : function(){
console.log('單擊事件發(fā)生');
}
}
})
</script>

slot 允許外部環(huán)境將額外的內(nèi)容組合在組件中。

slot 相當于在子組件設置了一個地方，當調(diào)用它的時候，往它的開閉標簽之間放了東西，那么它就把這些東西放到 slot 中。通過 slot 我們調(diào)用組件的時候就可以根據(jù)需要改變組件的實際內(nèi)容。

例如子組件模版：

<div>
<h3>我是子組件的標題</h3>
<slot>
只有在沒有要分發(fā)的內(nèi)容時才會顯示。
</slot>
</div>

父組件模版：

<div>
<h2>我是父組件的標題</h2>
<my-component>
<p>這是一些初始內(nèi)容</p>
</my-component>
</div>

渲染結(jié)果：

<div>
<h2>我是父組件的標題</h2>
<div>
<h3>我是子組件的標題</h3>
<p>這是一些初始內(nèi)容</p>
</div>
</div>

看完了這篇文章，相信你對vue.js組件化指的是什么有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當前文章：vue.js組件化指的是什么
本文來源：http://chinadenli.net/article32/pghdsc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、網(wǎng)站制作、面包屑導航、ChatGPT、手機網(wǎng)站建設、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)