vue.js元件化是什麼意思

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

本教學操作環境：windows7系統、Vue2.9.6版、Dell G3電腦。

推薦：《vue教學》

Vue 是一套用於建立使用者介面的漸進式框架。它有以下特點：

漸進式框架，採用自底向上增量開發設計

模版雙向綁定機制

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

元件化設計想法

Vue 的元件化將UI 頁面分割為若干元件進行組合和巢狀。

Vue 元件化

元件化是一種高效率的處理複雜應用系統，更好的明確功能模組作用的方式。目的是：為了解耦，把複雜系統分割成多個元件，分離組件邊界和責任，以便獨立昇級和維護。

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

為了更好地重複使用，這裡以建立彈窗元件為實例，談談如何建立一個專案的元件庫。

Vue 元件規範化

沒有規矩，難成方圓。

要搭建一個好的元件庫，應該一開始要訂定一些通用的規則。

1. 命名

元件的命名應該與業務無關，而是根據元件實現的功能來進行命名。同時，也應該與業務文件命名區分開來，可以加上一些特有的前綴。例如在這裡，所有元件前綴都加上 “UI” ，彈跳視窗元件命名為 “UIDialog”。

2. 實作

可重複使用元件實作的應該是通用的功能，它實現的應該是：

UI 的展示

#與用戶的互動（事件）

動畫效果

可重複使用元件應盡量減少對外部條件的依賴。一個獨立的功能元件，最好不要拆成若干個小元件來實現。

3. 瞭解元件屬性和事件

在 Vue 元件裡，狀態稱為 props，事件稱為 events，片段稱為 slots。

props 允許外部環境將資料傳遞給元件。

透過 props 來宣告自己的屬性。可以透過上文 dialog/index.vue 程式碼來理解。它的 type 即型別有：String、Number、Boolean、Array、Object、Date、Function、Symbol。

events 允許元件出發外部環境的副作用。

可以用 v-on 來監聽 Dom 事件。語法：v-on:事件類型=“事件處理函數名”。縮寫為： @事件類型=“事件處理函數名”。

一個直覺的例子是：

<ulid="app">
<liv-on:click="clickMe">单击事件</li>
</ul>
<script>
var app = new Vue({
el : &#39;#app&#39;,
data : {
},
methods : {
clickMe : function(){
console.log(&#39;单击事件发生&#39;);
}
}
})
</script>

slot 允許外部環境將額外的內容組合在元件中。

slot 相當於在子元件設定了一個地方，當呼叫它的時候，往它的開閉標籤之間放了東西，那麼它就把這些東西放到 slot 中。透過 slot 我們呼叫元件的時候就可以根據需要改變元件的實際內容。

例如子元件模版：

<div>
<h2 id="我是子组件的标题">我是子组件的标题</h2>
<slot>
只有在没有要分发的内容时才会显示。
</slot>
</div>

父元件模版：

<div>
<h1 id="我是父组件的标题">我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
</my-component>
</div>

渲染結果：

<div>
<h1 id="我是父组件的标题">我是父组件的标题</h1>
<div>
<h2 id="我是子组件的标题">我是子组件的标题</h2>
<p>这是一些初始内容</p>
</div>
</div>

以上是vue.js元件化是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！