vue.js組件化指的是什么

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

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

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

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

模版雙向綁定機制

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

組件化設計思想

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

Vue 組件化

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

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

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

Vue 組件規(guī)范化

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

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

1. 命名

組件的命名應該與業(yè)務無關，而是根據(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ù)名”。縮寫為： @事件類型=“事件處理函數(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)境將額外的內容組合在組件中。

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

例如子組件模版：

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

父組件模版：

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

渲染結果：

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

看完了這篇文章，相信你對vue.js組件化指的是什么有了一定的了解，想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！