前言
組件（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能有一定的幫助，如果有疑問大家可以留言交流。