前言
組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴展。
組件開發的基礎
組件可以擴展 HTML 元素，封裝可重用的代碼。我理解為功能模塊的模板吧。
對于vue來說，組件是這個樣子的，我們在html里面寫
<div id="example"> <my-component></my-component></div>edx
然后就出來
<div id="example"> <div>A custom component!</div></div>
代碼 <div>A custom component!</div>我們只要寫一遍就行了 。
所以我們需要定義它，把 my-component的標簽和代碼關聯起來，所以我們要定義它
// 定義var MyComponent = Vue.extend({ template: '<div>A custom component!</div>'})定義了之后，我們要讓頁面能夠渲染它，讓Vue知道它的存在
// 注冊 Vue.component('my-component', MyComponent)// 創建根實例new Vue({ el: '#example'})以上，是官網一個非常簡單的例子 ，其實覺得和一個function的封裝也差不多，定義，引入，然后執行。
然后一個組件可以引用別的組件的東西，有點像函數的互相調用啊。
var Child = Vue.extend({ /* ... */ })var Parent = Vue.extend({ template: '...', components: { // <my-component> 只能用在父組件模板內 'my-component': Child }})一個表格組件的實例
這是官網的例子
這個是一個可以排序的表格的例子。我們從頭開始來制作一個可以排序的表格。
基本結構
首先分成兩個部分，一個是搜索框，一個是表格本身，我們可以得到這樣的結構
<div id="demo"> <form id="search"> Search <input name="query"> </form><table> <thead> <tr> <th>name</th> <th>power</th> </tr> </thead> <tbody> <tr> <td>Jack Chan</td> <td>7000</td> </tr> </tbody></table></div>
顯示效果
加上基本的css
body { font-family: Helvetica Neue, Arial, sans-serif; font-size: 14px; color: #444;}table { border: 2px solid #42b983; border-radius: 3px; background-color: #fff;}th { background-color: #42b983; color: rgba(255,255,255,0.66); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -user-select: none;}td { background-color: #f9f9f9;}th, td { min-width: 120px; padding: 10px 20px;}#search { margin-bottom: 10px;}顯示效果如下，
提取組件
我們是想要讓表格成為單獨的組件，所以我們定義一個叫做 demo-grid的組件，用它來生成表格
<div id="demo"> <form id="search"> Search <input name="query" > </form> <demo-grid> </demo-grid></div>
代碼里面關于表格的那部分給放到組件模板里面，我們定義組件。也就是用script來定義,
<script type="text/x-template" id="grid-template"> <table> <thead> <tr> <th>name</th> <th>power</th> </tr> </thead> <tbody> <tr> <td>Jack Chan</td> <td>7000</td> </tr> </tbody> </table></script>
定義完了之后我們要在給Vue注冊組件模塊，然后進行Vue的渲染
Vue.component('demo-grid',{ template:"#grid-template", }); var demo = new Vue({ el:'#demo' })然后最后的效果是一樣的，這個時候并沒有數據流。
組件數據流
我們要讓表格知道表格的頭部和表格的內容，也就是有一個gridColumns和gridData，這個數據最開始放在Vue的Data里面
// bootstrap the demo var demo = new Vue({ el: '#demo', data: { gridColumns: ['name', 'power'], gridData: [ { name: 'Chuck Norris', power: Infinity }, { name: 'Bruce Lee', power: 9000 }, { name: 'Jackie Chan', power: 7000 }, { name: 'Jet Li', power: 8000 } ] } })然后我們的組件也要接受這個數據,這里我們通過類似屬性的形式給組件模板傳入數據，
<demo-grid :data="gridData" :columns="gridColumns"> </demo-grid>
然后我們在組件里面把相應的數據繼承下來。
Vue.component('demo-grid',{ template:"#grid-template", props: { data: Array, columns: Array } });然后在模板里面替換掉
<script type="text/x-template" id="grid-template"> <table> <thead> <tr> <th v-for="key in columns">{{key}}</th> </tr> </thead> <tbody> <tr v-for="entry in data"> <td v-for="key in columns">{{entry[key]}}</td> </tr> </tbody> </table></script>效果如下
搜索功能增加
這個時候，我們想加入一個交互，也就是在搜索框增加關鍵詞的時候，表格能夠相應地變化。
首先我們要綁定搜索框的模型,也就是用searchQuery來綁定Input
<form id="search"> Search <input name="query" v-model="searchQuery"> </form>
在Vue里面增加data的初始化
var demo = new Vue({ el: '#demo', data: { searchQuery: '', ... })同時，在組件模板里面也進行參數傳入
<demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery"> </demo-grid>
組件的定義里面要繼承模板的數據,也就是在模板里面是filter-key，注意要轉化駝峰寫法
Vue.component('demo-grid', { template: '#grid-template', props: { data: Array, columns: Array, filterKey: String }})這個時候，我們的模板里面要過濾符合filterKey的數據,這里就用到了過濾器，vue提供了一個叫做filterBy的過濾器。|與過濾器，第一個為過濾器的名字，后面的是參數，| filterBy filterKey使用的就是filterBy的過濾器，參數是filterKey
<tr v-for=" entry in data | filterBy filterKey> <td v-for="key in columns"> {{entry[key]}} </td> </tr>效果如下，我們這樣就有了一個 能夠過濾的表格
表格排序
這部分邏輯比前面稍微復雜一點點。首先我們給表格加一個三角形，三角形有兩種，一種是正序的，一種是逆序的，我們用span來作為三角形的容器
<th v-for="key in columns" @click="sortBy(key)" :class="{active: sortKey == key}"> {{key | capitalize}} <span class="arrow"> </span> </th>三角形的樣式有兩種，上升的和下降的
.arrow { display: inline-block; vertical-align: middle; width: 0; height: 0; margin-left: 5px; opacity: 0.66;}.arrow.asc { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #fff;}.arrow.dsc { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #fff;}dsc的效果如下
我們希望能夠在不同的狀態里面切換，所以我們選擇在組件里面有數據存儲排序的狀態信息，用一個sortOrders的對象來存儲排序信息 ，同時用一個sortKey來表示當前用來排序的鍵，我們設置為name
// register the grid component Vue.component('demo-grid', { template: '#grid-template', ... data: function () { var sortOrders = {} this.columns.forEach(function (key) { sortOrders[key] = 1 }) return { sortKey: 'name', sortOrders: sortOrders } }然后使用orderBy來排序
<tbody> <tr v-for=" entry in data | filterBy filterKey | orderBy sortKey sortOrders[sortKey]"> <td v-for="key in columns"> {{entry[key]}} </td> </tr> </tbody>現在也就是根據name升序排序，所以我們看到表格的結果如下
增加交互
我們希望能夠通過點擊表格頭部來自動升序降序,所以添加鼠標事件，另外把span的樣式和sortOrders[key]的值相關聯,增加active的樣式
<th v-for="key in columns" @click="sortBy(key)" :class="{active: sortKey == key}"> {{key | capitalize}} <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"> </span> </th>相關active的樣式如下
th.active .arrow { opacity: 1;}對于鼠標事件，我們定義在表格內部，也就是把sortKey定位當前活躍的元素，同時改變sortOrders[key]的值
// register the grid component Vue.component('demo-grid', { template: '#grid-template', props: { ... }, data: function () { ... }, methods: { sortBy: function (key) { this.sortKey = key this.sortOrders[key] = this.sortOrders[key] * -1 } } });總結
以上就是關于vue.js組件開發的全部內容了，希望這篇文章對大家學習或者使用vue.js能有一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
