在大型應(yīng)用開發(fā)的時候，頁面可以劃分成很多部分。往往不同的頁面，也會有相同的部分。例如可能會有相同的頭部導(dǎo)航。
但是如果每個頁面都獨自開發(fā)，這無疑增加了我們開發(fā)的成本。所以為了提高代碼復(fù)用，我們會把頁面的可復(fù)用部分拆分成獨立的組件，然后在不同頁面就可以共享這些組件，避免重復(fù)開發(fā)。

第1個組件案例

有如下需求：在頁面上要定義多個記錄點擊次數(shù)的按鈕，我們使用之前的所學(xué)，可以這么做：

<div id="app"><button @click="increment1">你點了我{{count1}}次，我記住了</button><button @click="increment2">你點了我{{count2}}次，我記住了</button> </div><script >const vm = new Vue({el:"#app",data:{count1:0,count2:0},methods:{increment1(){this.count1++;},increment2(){this.count2++;}}}) </script>

注意：不同的按鈕，必須操作不同的屬性，如果使用同1個屬性，多個按鈕的點擊次數(shù)會累加到一起。如果按鈕的數(shù)量要求更多，按照這種方式，無法代碼復(fù)用，影響開發(fā)效率而且代碼也不易維護(hù)。

解決方案：可以將需要復(fù)用的代碼定義成組件，通過組件進(jìn)行復(fù)用。
1.注冊組件

<script >Vue.component("button-counter",{template:"<button @click='increment'>你點了我{{count}}次，我記住了</button>",data:function(){return {count:0}},methods:{increment(){this.count++;}}}) </script>

• 通過component方法注冊組件
• 第1個參數(shù)表示組件名
• 第2個參數(shù)表示組件的組成，組件本質(zhì)上也是一個Vue實例，也就可以定義：data、methods等等
• 組件在定義時，不會和任何頁面元素綁定，因此沒有el屬性。但多了template屬性抽取html片段
• data必須是一個函數(shù)，后面解釋

2.使用組件

<div id="app"><button-counter></button-counter><button-counter></button-counter> </div>

• 把組件名當(dāng)作標(biāo)簽直接使用就可以
  3.創(chuàng)建vue實例

<div id="app"><!-- 2 使用組件 --><button-counter></button-counter><button-counter></button-counter> </div><script >//1 注冊組件Vue.component("button-counter",{template:"<button @click='increment'>你點了我{{count}}次，我記住了</button>",data:function(){return {count:0}},methods:{increment(){this.count++;}}})//3 創(chuàng)建vue實例const vm = new Vue({el:"#app"}) </script>

• 因為組件會被多次使用，所以定義組件時，語法上要求data必須是一個函數(shù)，每次使用時返回一個新的對象。
• 組件要在Vue實例中使用，所以最后一定要創(chuàng)建Vue實例。

還有2點需要注意：

• 組件名如果由多個單詞組成，按照規(guī)范多個單詞全小寫，并使用-連接，比如 button-counter。如果使用駝峰命令法，比如 buttonCounter，那么在使用組件時，也需要在單詞間添加 -。
• 組件中 template只能有一個根標(biāo)簽，比如實例中只有一個div根標(biāo)簽。如果又有一個同級的div就會報錯。

template:"<div><button>按鈕</button><br></div>" //對 template:"<button @click='increment'>你點了我{{count}}次，我記住了</button>" //對 template:"<div><button>按鈕<button></div><div></div>" //錯誤，2個div根標(biāo)簽

組件的注冊方式

組件的注冊方式有2種：全局注冊 和 局部注冊

1.全局注冊

全局注冊的組件，可以在不同的Vue實例中使用。語法如下：

<script>Vue.component("組件名",{template:"復(fù)用的html片段",data:function(){return {...}//return的對象，類似于創(chuàng)建Vue實例時的data},methods:{//和定義Vue實例時一樣，用于定義函數(shù)}}) </script>

第1個案例就是全局注冊，這里不再演示。

2.局部注冊

一旦全局注冊，就意味著即便以后你不再使用這個組件，它依然會隨著Vue的加載而加載。因此，對于一些并不頻繁使用的組件，我們會采用局部注冊。在Vue實例中添加選項 components 語法如下：

<script>const vm = new Vue({el:"選擇器",data:{//屬性},components:{//注冊局部組件"組件名":{template:"復(fù)用的html片段",data:function(){return {...}//return的對象，類似于創(chuàng)建Vue實例時的data},methods:{//和定義Vue實例時一樣，用于定義函數(shù)}}}}); </script>

示例：

<div id="app"><button-counter></button-counter><button-counter></button-counter> </div> <script>const vm = new Vue({el:"#app",components:{"button-counter":{template:"<button @click='increment'>你點了我{{count}}次，我記住了</button>",data:function(){return {count:0}},methods:{increment(){this.count++;}}}}})</script>

3.注冊優(yōu)化

優(yōu)化1：將組件參數(shù)單獨抽取成變量
當(dāng)Vue實例中注冊的組件比較多時，Vue實例的代碼就會變得非常臃腫，不利于代碼管理，此時可以將Vue實例參數(shù)抽取成變量。

<script>const buttonCounter = {template:"<button @click='increment'>你點了我{{count}}次，我記住了</button>",data:function(){return {count:0}},methods:{increment(){this.count++;}}};const vm = new Vue({el:"#app",components:{"button-counter":buttonCounter}})</script>

說明：組件注冊時，如果組件名和組件變量名同名，還可以簡寫：

components:{ buttonCounter:buttonCounter }
// ==> 直接只寫一個
buttonCounter即可 components:{ buttonCounter }

優(yōu)化2：將html片段抽取到template標(biāo)簽中
當(dāng)template中的html片段比較復(fù)雜時，在組件參數(shù)中直接定義html片段非常麻煩，此時可以將html片段抽取到特殊的template標(biāo)簽中。

<template id="bc"><!-- 再次提示：template標(biāo)簽中也必須只有一個根標(biāo)簽 --><button @click='increment'>你點了我{{count}}次，我記住了</button> </template> <script>const buttonCounter = {template:"#bc",data:function(){return {count:0}},methods:{increment(){this.count++;}}};const vm = new Vue({el:"#app",components:{"button-counter":buttonCounter}})</script>

4.組件和is屬性（了解）

在html標(biāo)簽中使用組件時，受到 HTML 本身的一些限制。比如table、ul、select內(nèi)部只能出現(xiàn)特定的子標(biāo)簽，如果在這些標(biāo)簽中使用組件，組件無法正確顯示。解決方案：使用is屬性

<div id="app"><h4>直接在table中使用table-body組件</h4><table border="1"><thead><tr><th>id</th><th>name</th><th>age</th><th>gender</th></tr></thead><!-- 直接使用組件--><table-body></table-body></table><h4>在table中通過is屬性使用table-body組件</h4><table border="1"><thead><tr><th>id</th><th>name</th><th>age</th><th>gender</th></tr></thead><!-- 通過is屬性使用組件 --><tbody is="table-body"></tbody></table> </div><template id="table-body"><tbody><tr v-for="u in users" :key="u.id"><td>{{u.id}}</td><td>{{u.name}}</td><td>{{u.age}}</td><td>{{u.gender}}</td></tr></tbody> </template><script>const tableBody = {template:"#table-body",data(){return {users: [{"id":1, "name": "小明", "age": 13, "gender": "男"},{"id":2, "name": "小紅", "age": 13, "gender": "女"},{"id":3, "name": "小綠", "age": 4, "gender": "男"}]}}}const vm = new Vue({el:"#app",components:{"table-body":tableBody}}) </script>

注：第二部分的全部內(nèi)容整合成pdf文檔，可以進(jìn)行下載保存

https://download.csdn.net/download/technologist_28/21114069

總結(jié)

以上是生活随笔為你收集整理的Vue第二部分(1)：组件基础学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。