什么是組件

成都創(chuàng)新互聯(lián)是一家專(zhuān)注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),同安網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:同安等地區(qū)。同安做網(wǎng)站價(jià)格咨詢(xún):028-86922220

組件（Component）是對(duì)數(shù)據(jù)和方法的簡(jiǎn)單封裝。web中的組件其實(shí)可以看成是頁(yè)面的一個(gè)組成部分，它是一個(gè)具有獨(dú)立的邏輯和功能的界面，同時(shí)又能根據(jù)規(guī)定的接口規(guī)則進(jìn)行相互融和，最終成為一個(gè)完整的應(yīng)用，頁(yè)面就是由一個(gè)個(gè)類(lèi)似這樣的組成部分組成的，比如導(dǎo)航、列表、彈窗、下拉菜單等。頁(yè)面只不過(guò)是這樣組件的容器，組件自由組合形成功能完整的界面，當(dāng)不需要某個(gè)組件，或者想要替換某個(gè)組件時(shí)，可以隨時(shí)進(jìn)行替換和刪除，而不影響整個(gè)應(yīng)用的運(yùn)行。、前端組件化的核心思想就是將一個(gè)巨大復(fù)雜的東西拆分成粒度合理的小東西。

使用提高開(kāi)發(fā)效率、方便重復(fù)使用、簡(jiǎn)化調(diào)試步驟、提升整個(gè)項(xiàng)目的可維護(hù)性、便于協(xié)同開(kāi)發(fā)。

vue作為一個(gè)輕量級(jí)前端框架，其核心就是組件化開(kāi)發(fā)。

組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以表現(xiàn)為用 is 特性進(jìn)行了擴(kuò)展的原生 HTML 元素。

vue中，組件是可復(fù)用的 Vue 實(shí)例。因?yàn)榻M件是可復(fù)用的 Vue 實(shí)例，所以它們與 new Vue 接收相同的選項(xiàng)，例如 data、computed、watch、methods 以及生命周期鉤子等。僅有的例外是像 el 這樣根實(shí)例特有的選項(xiàng)。

組件注冊(cè)

全局注冊(cè)

通過(guò) Vue.component 來(lái)創(chuàng)建組件：

 Vue.component('my-component-name', {
 // ... 選項(xiàng) ...
 })

這些組件是全局注冊(cè)的。也就是說(shuō)它們?cè)谧?cè)之后可以用在任何新創(chuàng)建的 Vue 根實(shí)例 (new Vue) 的模板中。比如：

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

<div id="app">
 <component-a></component-a>
 <component-b></component-b>
 <component-c></component-c>
</div>

在所有子組件中也是如此，也就是說(shuō)這三個(gè)組件在各自?xún)?nèi)部也都可以相互使用。

局部注冊(cè)

全局注冊(cè)往往是不夠理想的。比如，如果你使用一個(gè)像 webpack 這樣的構(gòu)建系統(tǒng)，全局注冊(cè)所有的組件意味著即便你已經(jīng)不再使用一個(gè)組件了，它仍然會(huì)被包含在你最終的構(gòu)建結(jié)果中。這造成了用戶(hù)下載的 JavaScript 的無(wú)謂的增加。

在這些情況下，你可以通過(guò)一個(gè)普通的 JavaScript 對(duì)象來(lái)定義組件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

然后在 components 選項(xiàng)中定義你想要使用的組件：

new Vue({
 el: '#app'
 components: {
 'component-a': ComponentA,
 'component-b': ComponentB
 }
})

對(duì)于 components 對(duì)象中的每個(gè)屬性來(lái)說(shuō)，其屬性名就是自定義元素的名字，其屬性值就是這個(gè)組件的選項(xiàng)對(duì)象。
注意局部注冊(cè)的組件在其子組件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，則你需要這樣寫(xiě)：

var ComponentA = { /* ... */ }

var ComponentB = {
 components: {
 'component-a': ComponentA
 },
 // ...
}

使用Babel和webpack中的注冊(cè)組件

import ComponentA from './ComponentA.vue'

export default {
 components: {
 ComponentA
 },
 // ...
}

注意在 ES2015+ 中，在對(duì)象中放一個(gè)類(lèi)似 ComponentA 的變量名其實(shí)是 ComponentA: ComponentA 的縮寫(xiě)，即這個(gè)變量名同時(shí)是：

用在模板中的自定義元素的名稱(chēng)
包含了這個(gè)組件選項(xiàng)的變量名

基礎(chǔ)組件的自動(dòng)化全局注冊(cè)

沒(méi)看懂。

data 必須是一個(gè)函數(shù)

data: {
 count: 0
}

這樣定義的data中的變量是全局變量，在使用組件時(shí)，在一個(gè)組件中修改變量的值，會(huì)影響到所有組件中該變量的值。為避免變量干擾，一個(gè)組件的 data 選項(xiàng)必須是一個(gè)函數(shù)，因此每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝：

data: function () {
 return {
 count: 0
 }
}

動(dòng)態(tài)組件

在不同組件之間進(jìn)行動(dòng)態(tài)切換是非常有用的，比如在一個(gè)多標(biāo)簽的界面里：

上述內(nèi)容可以通過(guò) Vue 的 <component> 元素加一個(gè)特殊的 is 特性來(lái)實(shí)現(xiàn)：

<!-- 組件會(huì)在 `currentTabComponent` 改變時(shí)改變 -->
<component v-bind:is="currentTabComponent"></component>

你會(huì)注意到，如果你選擇了一篇文章，切換到 Archive 標(biāo)簽，然后再切換回 Posts，是不會(huì)繼續(xù)展示你之前選擇的文章的。這是因?yàn)槟忝看吻袚Q新標(biāo)簽的時(shí)候，Vue 都創(chuàng)建了一個(gè)新的 currentTabComponent 實(shí)例。

重新創(chuàng)建動(dòng)態(tài)組件的行為通常是非常有用的，但是在這個(gè)案例中，我們更希望那些標(biāo)簽的組件實(shí)例能夠被在它們第一次被創(chuàng)建的時(shí)候緩存下來(lái)。為了解決這個(gè)問(wèn)題，我們可以用一個(gè) <keep-alive> 元素將其動(dòng)態(tài)組件包裹起來(lái)。

<!-- 失活的組件將會(huì)被緩存！-->
<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive>

可以在這里查看動(dòng)態(tài)組件例子。https://jsfiddle.net/chrisvfritz/Lp20op9o/

dom標(biāo)簽內(nèi)使用組件

有些 HTML 元素，諸如 <ul>、<ol>、<table> 和 <select>，對(duì)于哪些元素可以出現(xiàn)在其內(nèi)部是有嚴(yán)格限制的。而有些元素，諸如 <li>、<tr> 和 <option>，只能出現(xiàn)在其它某些特定的元素內(nèi)部。

這會(huì)導(dǎo)致我們使用這些有約束條件的元素時(shí)遇到一些問(wèn)題。例如：

<table>
 <blog-post-row></blog-post-row>
</table>

這個(gè)自定義組件 <blog-post-row> 會(huì)被作為無(wú)效的內(nèi)容提升到外部，并導(dǎo)致最終渲染結(jié)果出錯(cuò)。幸好這個(gè)特殊的 is 特性給了我們一個(gè)變通的辦法：

<table>
 <tr is="blog-post-row"></tr>
</table>

網(wǎng)站名稱(chēng)：詳解vue組件基礎(chǔ)
文章來(lái)源：http://jinyejixie.com/article2/pggcoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、自適應(yīng)網(wǎng)站、網(wǎng)站營(yíng)銷(xiāo)、企業(yè)網(wǎng)站制作、用戶(hù)體驗(yàn)、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)