建立元件的模板，先把架子搭起來，寫寫樣式，考慮好元件的基本邏輯。
準備好元件的資料輸入。即分析好邏輯，定好 props 裡面的資料、型別。
準備好元件的資料輸出。即根據元件邏輯，做好要暴露出來的方法。
封裝完畢了，直接呼叫即可。
1.父元件與子元件傳值
父元件傳給子元件：子元件通過props方法接受資料;
子元件傳給父元件：$emit方法傳遞引數
2.非父子元件間的資料傳遞，兄弟元件傳值
vue 官方提供的 vuex 框架
發布訂閱模式（匯流排機制 / bus / 觀察者模式）
eventbus，就是建立乙個事件中心，相當於中轉站，可以用它來傳遞事件和接收事件。專案比較小時，用這個比較合適。
我寫table元件的思路：
1.樣式定義
2. 選中資料（checkbox）父元件呼叫:selected-item.sync="selecteditem";selecteditem=;
3.slot插槽：可用於操作、按鈕等等
**
}}
}
}
@import '../index'; //呼叫的是公用樣式，這裡就不寫了
// peiyu: 2019.12.24 --> 2019.12.27
// 內容間距(innerspacing):big(16px)、middle(12px)、small(8px)、min(4px); 預設：middle
$innerspacing-big = 16px 8px;
$innerspacing-middle = 12px 6px;
$innerspacing-small = 8px 4px;
$innerspacing-min = 4px 2px;
.big
} .middle
} .small
}.min
} // 有無邊框
.border-frame
} // 有無hover
.rowhover-bgcolor }}
} // 斑馬紋
.table-interval-background
// 對其方式 內容(align)/表頭(headeralign)：left center right; 預設：center
.centeraligninner
}.leftaligninner
}.rightaligninner
}.centerheaderaligninner
}.leftheaderaligninner
}.rightheaderaligninner
}// 不換行
th,td
// 預設樣式
.d-default-table
}.table-body
}
}// 固定表頭
.d-fixed-thead-style
}.table-body
}} // checkbox
input[type="checkbox"]
input[type="checkbox"]:checked
input[type=checkbox]:checked::after
.table-head
}
Vue2 元件封裝
接觸乙個前端框架，除了基礎的使用語法以外我們接下來都會很關心元件和復用的問題。以下就是個簡單的例子。下面是在父元件中引入子元件的 片段 booklist out container booklist container for book in books book book div button c...
vue 封裝元件
一 通過install 封裝 1 建立元件資料夾包含 vue檔案和對應的.js檔案 如圖 2 完成元件模板 這是乙個公共元件內容 3 在相應的js內註冊元件 list.js檔案 import mylist from list.vue const list export default list 匯入...
Vue封裝分頁元件
使用vue做雙向繫結的時候，可能經常會用到分頁功能 接下來我們來封裝乙個分頁元件 先定義樣式檔案 pagination.css ul,li page bar page button disabled page bar li page bar li first child a page bar a p...