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

第1個(gè)組件案例

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

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

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

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

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

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

2.使用組件

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

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

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

• 因?yàn)榻M件會(huì)被多次使用，所以定義組件時(shí)，語(yǔ)法上要求data必須是一個(gè)函數(shù)，每次使用時(shí)返回一個(gè)新的對(duì)象。
• 組件要在Vue實(shí)例中使用，所以最后一定要?jiǎng)?chuàng)建Vue實(shí)例。

還有2點(diǎn)需要注意：

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

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

組件的注冊(cè)方式

組件的注冊(cè)方式有2種：全局注冊(cè) 和 局部注冊(cè)

1.全局注冊(cè)

全局注冊(cè)的組件，可以在不同的Vue實(shí)例中使用。語(yǔ)法如下：

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

第1個(gè)案例就是全局注冊(cè)，這里不再演示。

2.局部注冊(cè)

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

<script>const vm = new Vue({el:"選擇器",data:{//屬性},components:{//注冊(cè)局部組件"組件名":{template:"復(fù)用的html片段",data:function(){return {...}//return的對(duì)象，類似于創(chuàng)建Vue實(shí)例時(shí)的data},methods:{//和定義Vue實(shí)例時(shí)一樣，用于定義函數(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'>你點(diǎn)了我{{count}}次，我記住了</button>",data:function(){return {count:0}},methods:{increment(){this.count++;}}}}})</script>

3.注冊(cè)優(yōu)化

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

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

說(shuō)明：組件注冊(cè)時(shí)，如果組件名和組件變量名同名，還可以簡(jiǎn)寫(xiě)：

components:{ buttonCounter:buttonCounter }
// ==> 直接只寫(xiě)一個(gè)
buttonCounter即可 components:{ buttonCounter }

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

<template id="bc"><!-- 再次提示：template標(biāo)簽中也必須只有一個(gè)根標(biāo)簽 --><button @click='increment'>你點(diǎn)了我{{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)簽中使用組件時(shí)，受到 HTML 本身的一些限制。比如table、ul、select內(nèi)部只能出現(xiàn)特定的子標(biāo)簽，如果在這些標(biāo)簽中使用組件，組件無(wú)法正確顯示。解決方案：使用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中通過(guò)is屬性使用table-body組件</h4><table border="1"><thead><tr><th>id</th><th>name</th><th>age</th><th>gender</th></tr></thead><!-- 通過(guò)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>

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

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

總結(jié)

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

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