什麼是組件？
組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴展。
本篇資料是小編參考官方文檔的基礎上整理的一篇更加細致的說明，代碼更多更全，非常適合新手學習。
官方文檔：
http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6
組件——雜項詳細介紹如下所示：
①組件和v-for
簡單來說，就是組件被多次復用；
例如表格裡的某一行，又例如電商的商品櫥窗展示（單個櫥窗），都可以成為可以被復用的組件；
只要編寫其中一個作為組件，然後使數據來源成為一個數組（或對象，但個人覺得最好是數組），通過v-for的遍歷，組件的每個實例，都可以獲取這個數組中的一項，從而生成全部的組件。
而數據傳輸，由於復用，所以需要使用props，將遍歷結果i，和props綁定的數據綁定起來，綁定方法同普通的形式，在模板中綁定。
示例代碼：
<div id="app">
<button @click="toknowchildren">點擊讓子組件顯示</button>
<table>
<tr>
<td>索引</td>
<td>ID</td>
<td>說明</td>
</tr>
<tr is="the-tr" v-for="i in items" v-bind:id="i" :index="$index"></tr>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
items: [1, 2, 3, 4]
},
methods: {
toknowchildren: function () { //切換組件顯示
console.log(this.$children);
}
},
components: {
theTr: { //第一個子組件
template: "<tr>" +
"<td>{{index}}</td>" +
"<td>{{id}}</td>" +
"<td>這裡是子組件</td>" +
"</tr>",
props: ['id','index']
}
}
});
</script>
說明：
【1】記得將要傳遞的數據放在props裡！
【2】將index和索引$index綁定起來，因為索引從0開始，因此索引所在列是從0開始；id是和遍歷items的i綁定在一起的，因此id從1開始。
【3】可以在父組件中，通過this.$children來獲取子組件（但是比較麻煩，特別是組件多的時候，比較難定位）；
②編寫可復用的組件：
簡單來說，一次性組件（只用在這裡，不會被復用的）跟其他組件緊密耦合是可以的，但是，可復用的組件應當定義一個清晰的公開接口。（不然別人怎麼用？）
可復用的組件，基本都是要和外部交互的，而一個組件和外部公開的交互接口有：
【1】props：允許外部環境數據傳遞給組件；
【2】事件：允許組件觸發外部環境的action，就是說通過在掛載點添加v-on指令，讓子組件的events觸發時，同時觸發父組件的methods；
【3】slot：分發，允許將父組件的內容插入到子組件的視圖結構中。
如代碼：
<div id="app">
<p>這是第一個父組件</p>
<widget
:the-value="test"
@some="todo">
<span>【第一個父組件插入的內容】</span>
</widget>
</div>
<div id="app2">
<p>這是第二個父組件</p>
<widget @some="todo">
</widget>
</div>
<script>
Vue.component("widget", {
template: "<button @click='dosomething'><slot></slot>這是一個復用的組件，點擊他{{theValue}}</button>",
methods: {
dosomething: function () {
this.$emit("some");
}
},
events: {
some: function () {
console.log("widget click");
}
},
props: ['theValue']
})
var vm = new Vue({
el: '#app',
data: {
test: "test"
},
methods: {
todo: function () {
console.log("這是第一個父組件")
}
}
});
var vm_other = new Vue({
el: '#app2',
data: {
name: "first"
},
methods: {
todo: function () {
console.log("這是另外一個父組件")
}
}
});
</script>
說明：
【1】在第一個父組件中使用了分發slot，使用了props來傳遞值（將test的值傳到子組件的theValue之中）；
【2】在兩個組件中，子組件在點擊後，調用methods裡的dosomething方法，然後執行了events裡的some事件。又通過掛載點的@some=”todo”，將子組件的some事件和父組件的todo方法綁定在一起。
因此，點擊子組件後，最終會執行父組件的todo方法。
【3】更改父組件中，被傳遞到子組件的值，會同步更改子組件的值（即二者會數據綁定）；
③異步組件：
按照我的理解，簡單來說，一個大型應用，他有多個組件，但有些組件無需立即加載，因此被分拆成多個組件（比如說需要立即加載的，不需要立即加載的）；
需要立即加載的，顯然放在同一個文件中比較好（或者同一批一起請求）；
而不需要立即加載的，可以放在其他文件中，但需要的時候，再ajax向服務器請求；
這些後續請求的呢，就是異步組件；
做到這種異步功能的，就是Vue.js的功能——允許將組件定義為一個工廠函數，動態解析組件的定義。
可以配合webpack使用。
至於如何具體使用，我還不太明白，教程中寫的不清，先擱置等需要的時候來研究。
鏈接：
http://cn.vuejs.org/guide/components.html#u5F02_u6B65_u7EC4_u4EF6
④資源命名的約定：
簡單來說，html標簽（比如div和DIV是一樣的）和特性（比如要寫成v-on這樣的指令而不是vOn）是不區分大小寫的。
而資源名往往是寫成駝峰式（比如camelCase駝峰式），或者單詞首字母都大寫的形式（比如PascalCase，我不知道該怎麼稱呼這個，不過這樣寫很少的說）。
Vue.component("myTemplate", {
//......略
})
Vue.js可以自動識別這個並轉換，
<my-template></my-template>
以上那個模板可以自動替換這個標簽。
⑤遞歸組件：
簡單來說，遞歸組件就是組件在自己裡內嵌自己的模板。
組件想要遞歸，需要name屬性，而Vue.component自帶name屬性。
大概樣子是這樣的，
<div id="app">
<my-template></my-template>
</div>
<script>
Vue.component("myTemplate", {
template: "<p><my-template></my-template></p>"
})
這種是無限遞歸，肯定是不行的。因此，需要控制他遞歸的層數，例如通過數據來控制遞歸，當數據為空時，則停止遞歸。
示例代碼如下：
<ul id="app">
<li>
{{b}}
</li>
<my-template v-if="a" :a="a.a" :b="a.b"></my-template>
</ul>
<script>
Vue.component("myTemplate", {
template: '<ul><li>{{b}}</li><my-template v-if="a" :a="a.a" :b="a.b"></my-template></ul>',
props: ["a", "b"]
})
var data = {
a: {
a: {
a: 0,
b: 3
},
b: 2
},
b: 1
}
var vm = new Vue({
el: '#app',
data: data,
methods: {
todo: function () {
this.test += "!";
console.log(this.test);
}
}
});
</script>
說明：
【1】向下傳遞時，通過props傳遞a的值和b的值，其中a的值作為遞歸後組件的a和b的值的數據來源；
然後判斷傳遞到遞歸後的組件的a的值是否存在，如果存在則繼續遞歸；
如果a的值不存在，則停止遞歸。
⑥片斷實例：
簡單來說，所謂片斷實例，就是組件的模板不是處於一個根節點之下：
片斷實例代碼：
Vue.component("myTemplate", {
template: '<div>1</div>' +
'<div>2</div>',
})
非片斷實例：
Vue.component("myTemplate", {
template: '<div>' +
'<div>1</div>' +
'<div>2</div>' +
'</div>',
})
片斷實例的以下特性被忽略：
【1】組件元素上的非流程控制指令（例如寫在掛載點上的，由父組件控制的v-show指令之類，但注意，v-if屬於流程控制指令）；
【2】非props特性（注意，props不會被忽略，另外props是寫在掛載點上的）；
【3】過渡（就是transition這個屬性，將被忽略）；
更多的參照官方文檔：
http://cn.vuejs.org/guide/components.html#u7247_u65AD_u5B9E_u4F8B
⑦內聯模板
參照：http://cn.vuejs.org/guide/components.html#u5185_u8054_u6A21_u677F
以上所述是小編給大家介紹的Vuejs第十三篇之組件——雜項，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！