基本示例

這里有一個 Vue 組件的示例：

// 定義一個名為 button-counter 的新組件 Vue.component('button-counter', {data: function () {return {count: 0}},template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' })

組件是可復(fù)用的 Vue 實(shí)例，且?guī)в幸粋€名字：在這個例子中是?<button-counter>。我們可以在一個通過?new Vue?創(chuàng)建的 Vue 根實(shí)例中，把這個組件作為自定義元素來使用：

<div id="components-demo"><button-counter></button-counter> </div>

new Vue({ el: '#components-demo' })

You clicked me 0 times.

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

組件的復(fù)用

你可以將組件進(jìn)行任意次數(shù)的復(fù)用：

<div id="components-demo"><button-counter></button-counter><button-counter></button-counter><button-counter></button-counter> </div>

You clicked me 0 times.?You clicked me 0 times.?You clicked me 0 times.

注意當(dāng)點(diǎn)擊按鈕時，每個組件都會各自獨(dú)立維護(hù)它的?count。因?yàn)槟忝坑靡淮谓M件，就會有一個它的新實(shí)例被創(chuàng)建。

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

當(dāng)我們定義這個?<button-counter>?組件時，你可能會發(fā)現(xiàn)它的?data?并不是像這樣直接提供一個對象：

data: {count: 0 }

取而代之的是，一個組件的?data?選項必須是一個函數(shù)，因此每個實(shí)例可以維護(hù)一份被返回對象的獨(dú)立的拷貝：

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

如果 Vue 沒有這條規(guī)則，點(diǎn)擊一個按鈕就可能會像如下代碼一樣影響到其它所有實(shí)例：

You clicked me 0 times.?You clicked me 0 times.?You clicked me 0 times.

組件的組織

通常一個應(yīng)用會以一棵嵌套的組件樹的形式來組織：

例如，你可能會有頁頭、側(cè)邊欄、內(nèi)容區(qū)等組件，每個組件又包含了其它的像導(dǎo)航鏈接、博文之類的組件。

為了能在模板中使用，這些組件必須先注冊以便 Vue 能夠識別。這里有兩種組件的注冊類型：全局注冊和局部注冊。至此，我們的組件都只是通過?Vue.component?全局注冊的：

Vue.component('my-component-name', {// ... options ... })

全局注冊的組件可以用在其被注冊之后的任何 (通過?new Vue) 新創(chuàng)建的 Vue 根實(shí)例，也包括其組件樹中的所有子組件的模板中。

到目前為止，關(guān)于組件注冊你需要了解的就這些了，如果你閱讀完本頁內(nèi)容并掌握了它的內(nèi)容，我們會推薦你再回來把組件注冊讀完。

通過 Prop 向子組件傳遞數(shù)據(jù)

早些時候，我們提到了創(chuàng)建一個博文組件的事情。問題是如果你不能向這個組件傳遞某一篇博文的標(biāo)題或內(nèi)容之類的我們想展示的數(shù)據(jù)的話，它是沒有辦法使用的。這也正是 prop 的由來。

Prop 是你可以在組件上注冊的一些自定義特性。當(dāng)一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實(shí)例的一個屬性。為了給博文組件傳遞一個標(biāo)題，我們可以用一個?props?選項將其包含在該組件可接受的 prop 列表中：

Vue.component('blog-post', {props: ['title'],template: '<h3>{{ title }}</h3>' })

一個組件默認(rèn)可以擁有任意數(shù)量的 prop，任何值都可以傳遞給任何 prop。在上述模板中，你會發(fā)現(xiàn)我們能夠在組件實(shí)例中訪問這個值，就像訪問?data?中的值一樣。

一個 prop 被注冊之后，你就可以像這樣把數(shù)據(jù)作為一個自定義特性傳遞進(jìn)來：

<blog-post title="My journey with Vue"></blog-post> <blog-post title="Blogging with Vue"></blog-post> <blog-post title="Why Vue is so fun"></blog-post>

My journey with Vue

Blogging with Vue

Why Vue is so fun

然而在一個典型的應(yīng)用中，你可能在?data?里有一個博文的數(shù)組：

new Vue({el: '#blog-post-demo',data: {posts: [{ id: 1, title: 'My journey with Vue' },{ id: 2, title: 'Blogging with Vue' },{ id: 3, title: 'Why Vue is so fun' }]} })

并想要為每篇博文渲染一個組件：

<blog-postv-for="post in posts"v-bind:key="post.id"v-bind:title="post.title" ></blog-post>

如上所示，你會發(fā)現(xiàn)我們可以使用?v-bind?來動態(tài)傳遞 prop。這在你一開始不清楚要渲染的具體內(nèi)容，比如從一個 API 獲取博文列表的時候，是非常有用的。

到目前為止，關(guān)于 prop 你需要了解的大概就這些了，如果你閱讀完本頁內(nèi)容并掌握了它的內(nèi)容，我們會推薦你再回來把?prop?讀完。

單個根元素

當(dāng)構(gòu)建一個?<blog-post>?組件時，你的模板最終會包含的東西遠(yuǎn)不止一個標(biāo)題：

<h3>{{ title }}</h3>

最最起碼，你會包含這篇博文的正文：

<h3>{{ title }}</h3> <div v-html="content"></div>

然而如果你在模板中嘗試這樣寫，Vue 會顯示一個錯誤，并解釋道?every component must have a single root element (每個組件必須只有一個根元素)。你可以將模板的內(nèi)容包裹在一個父元素內(nèi)，來修復(fù)這個問題，例如：

<div class="blog-post"><h3>{{ title }}</h3><div v-html="content"></div> </div>

看起來當(dāng)組件變得越來越復(fù)雜的時候，我們的博文不只需要標(biāo)題和內(nèi)容，還需要發(fā)布日期、評論等等。為每個相關(guān)的信息定義一個 prop 會變得很麻煩：

<blog-postv-for="post in posts"v-bind:key="post.id"v-bind:title="post.title"v-bind:content="post.content"v-bind:publishedAt="post.publishedAt"v-bind:comments="post.comments" ></blog-post>

所以是時候重構(gòu)一下這個?<blog-post>?組件了，讓它變成接受一個單獨(dú)的?postprop：

<blog-postv-for="post in posts"v-bind:key="post.id"v-bind:post="post" ></blog-post>

Vue.component('blog-post', {props: ['post'],template: `<div class="blog-post"><h3>{{ post.title }}</h3><div v-html="post.content"></div></div>` })

上述的這個和一些接下來的示例使用了 JavaScript 的模板字符串來讓多行的模板更易讀。它們在 IE 下并沒有被支持，所以如果你需要在不 (經(jīng)過 Babel 或 TypeScript 之類的工具) 編譯的情況下支持 IE，請使用折行轉(zhuǎn)義字符取而代之。

現(xiàn)在，不論何時為?post?對象添加一個新的屬性，它都會自動地在?<blog-post>?內(nèi)可用。

通過事件向父級組件發(fā)送消息

在我們開發(fā)?<blog-post>?組件時，它的一些功能可能要求我們和父級組件進(jìn)行溝通。例如我們可能會引入一個可訪問性的功能來放大博文的字號，同時讓頁面的其它部分保持默認(rèn)的字號。

在其父組件中，我們可以通過添加一個?postFontSize?數(shù)據(jù)屬性來支持這個功能：

new Vue({el: '#blog-posts-events-demo',data: {posts: [/* ... */],postFontSize: 1} })

它可以在模板中用來控制所有博文的字號：

<div id="blog-posts-events-demo"><div :style="{ fontSize: postFontSize + 'em' }"><blog-postv-for="post in posts"v-bind:key="post.id"v-bind:post="post"></blog-post></div> </div>

現(xiàn)在我們在每篇博文正文之前添加一個按鈕來放大字號：

Vue.component('blog-post', {props: ['post'],template: `<div class="blog-post"><h3>{{ post.title }}</h3><button>Enlarge text</button><div v-html="post.content"></div></div>` })

問題是這個按鈕不會做任何事：

<button>Enlarge text </button>

當(dāng)點(diǎn)擊這個按鈕時，我們需要告訴父級組件放大所有博文的文本。幸好 Vue 實(shí)例提供了一個自定義事件的系統(tǒng)來解決這個問題。我們可以調(diào)用內(nèi)建的?$emit?方法并傳入事件的名字，來向父級組件觸發(fā)一個事件：

<button v-on:click="$emit('enlarge-text')">Enlarge text </button>

然后我們可以用?v-on?在博文組件上監(jiān)聽這個事件，就像監(jiān)聽一個原生 DOM 事件一樣：

<blog-post...v-on:enlarge-text="postFontSize += 0.1" ></blog-post>

My journey with Vue

Enlarge text

...content...

Blogging with Vue

Enlarge text

...content...

Why Vue is so fun

Enlarge text

...content...

使用事件拋出一個值

有的時候用一個事件來拋出一個特定的值是非常有用的。例如我們可能想讓?<blog-post>?組件決定它的文本要放大多少。這時可以使用?$emit?的第二個參數(shù)來提供這個值：

<button v-on:click="$emit('enlarge-text', 0.1)">Enlarge text </button>

然后當(dāng)在父級組件監(jiān)聽這個事件的時候，我們可以通過?$event?訪問到被拋出的這個值：

<blog-post...v-on:enlarge-text="postFontSize += $event" ></blog-post>

或者，如果這個事件處理函數(shù)是一個方法：

<blog-post...v-on:enlarge-text="onEnlargeText" ></blog-post>

那么這個值將會作為第一個參數(shù)傳入這個方法：

methods: {onEnlargeText: function (enlargeAmount) {this.postFontSize += enlargeAmount} }

在組件上使用?v-model

自定義事件也可以用于創(chuàng)建支持?v-model?的自定義輸入組件。記住：

<input v-model="searchText">

等價于：

<inputv-bind:value="searchText"v-on:input="searchText = $event.target.value" >

當(dāng)用在組件上時，v-model?則會這樣：

<custom-inputv-bind:value="searchText"v-on:input="searchText = $event" ></custom-input>

為了讓它正常工作，這個組件內(nèi)的?<input>?必須：

• 將其?value?特性綁定到一個名叫?value?的 prop 上
• 在其?input?事件被觸發(fā)時，將新的值通過自定義的?input?事件拋出

寫成代碼之后是這樣的：

Vue.component('custom-input', {props: ['value'],template: `<inputv-bind:value="value"v-on:input="$emit('input', $event.target.value)">` })

現(xiàn)在?v-model?就應(yīng)該可以在這個組件上完美地工作起來了：

<custom-input v-model="searchText"></custom-input>

到目前為止，關(guān)于組件自定義事件你需要了解的大概就這些了，如果你閱讀完本頁內(nèi)容并掌握了它的內(nèi)容，我們會推薦你再回來把自定義事件讀完。

通過插槽分發(fā)內(nèi)容

和 HTML 元素一樣，我們經(jīng)常需要向一個組件傳遞內(nèi)容，像這樣：

<alert-box>Something bad happened. </alert-box>

可能會渲染出這樣的東西：

Error!?Something bad happened.

幸好，Vue 自定義的?<slot>?元素讓這變得非常簡單：

Vue.component('alert-box', {template: `<div class="demo-alert-box"><strong>Error!</strong><slot></slot></div>` })

如你所見，我們只要在需要的地方加入插槽就行了——就這么簡單！

到目前為止，關(guān)于插槽你需要了解的大概就這些了，如果你閱讀完本頁內(nèi)容并掌握了它的內(nèi)容，我們會推薦你再回來把插槽讀完。

動態(tài)組件

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

HomePostsArchive

Home component

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

<!-- 組件會在 `currentTabComponent` 改變時改變 --> <component v-bind:is="currentTabComponent"></component>

在上述示例中，currentTabComponent?可以包括

• 已注冊組件的名字，或
• 一個組件的選項對象

你可以在這里查閱并體驗(yàn)完整的代碼，或在這個版本了解綁定組件選項對象，而不是已注冊組件名的示例。

到目前為止，關(guān)于動態(tài)組件你需要了解的大概就這些了，如果你閱讀完本頁內(nèi)容并掌握了它的內(nèi)容，我們會推薦你再回來把動態(tài)和異步組件讀完。

解析 DOM 模板時的注意事項

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

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

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

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

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

需要注意的是如果我們從以下來源使用模板的話，這條限制是不存在的：

• 字符串 (例如：template: '...')
• 單文件組件 (.vue)
• <script type="text/x-template">

到這里，你需要了解的解析 DOM 模板時的注意事項——實(shí)際上也是 Vue 的全部必要內(nèi)容，大概就是這些了。恭喜你！接下來還有很多東西要去學(xué)習(xí)，不過首先，我們推薦你先休息一下，試用一下 Vue，自己隨意做些好玩的東西。

如果你感覺已經(jīng)掌握了這些知識，我們推薦你再回來把完整的組件指南，包括側(cè)邊欄中組件深入章節(jié)的所有頁面讀完。

from:?https://cn.vuejs.org/v2/guide/components.html

總結(jié)

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

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