Vue元件化開發
阿新 • • 發佈：2020-07-28
Vue元件化開發
元件的概念
元件（component）是 Vue 最強大的功能之一，非常重要。
Vue中的元件化開發就是把網頁的重複程式碼抽離出來，分裝成一個個可以複用的檢視元件，然後將這些檢視元件拼接到一塊就構成了一個完整的系統。這個方式非常靈活，可以極大的提高我們的開發和維護效果。
元件系統是一種抽象，允許我們使用小型、獨立和通常可複用的元件構建大型應用。簡單來說，元件就是對區域性檢視的封裝。
抽離出來的元件，還是有三部分組成，分別是：HTML、JS、CSS。
使用元件的好處，就一句話：提高開發效率，更好的去解決軟體上的高耦合、低內聚、無重用的3大程式碼問題。
元件的基本使用
為了能在模板中使用，這些元件必須先註冊以便 Vue 能夠識別。
有兩種元件註冊型別：全域性註冊
全域性註冊
介紹
一般把網頁中特殊的公共部分註冊為全域性的元件：輪播圖、分頁、通用導航欄等。
全域性註冊之後，可以在任何新建立的Vue例項的模板中使用。
簡單格式：
Vue.component('元件名',{
template:'定義元件模板',
data:function(){ // data 選項在元件中必須是一個函式
return {}
}
// 其他選項：methods
})
說明：
- 元件名：
可以使用駝峰或者是橫線分割命名方式。
但DOM中只能使用橫線分割方式進行引用元件。
官方強烈推薦元件名字母全小寫且必須包含一個連字元
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全域性註冊</title> </head> <body> <div id="app"> <!-- 引用元件時必須使用橫線分割符 --> <component-a></component-a> <component-a></component-a> <component-b></component-b> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> // 全域性註冊元件 /*** * 1.元件命名：駝峰、橫線分隔符命名方式 * 2.使用元件：使用元件時必須採用橫線分隔符的方式進行引用 * * 元件可以理解為就是特殊的Vue例項，不需要手動的例項化而已，它用於管理自己的模板。 */ Vue.component('component-a', { // template選項，指定元件的模板程式碼 template: '<div><h1>頭部元件 -- {{name}}</h1></div>', data: function () { // 在元件中，data選項必須是一個函式 return { name: '全域性元件' } } }) // 定義區域性元件物件 const ComponentB = { template: '<div>這是 {{name}} </div>', data() { return { name: '區域性元件' } }, } new Vue({ el: '#app', components: { // key:value ; key為元件名，value是元件物件。 'component-b': ComponentB }, data: { } }) </script> </body> </html>