上一篇：Vue學(xué)習(xí)之組件基礎(chǔ)

組件名

在注冊(cè)一個(gè)組件的時(shí)候，我們始終需要給它一個(gè)名字。該組件名就是 Vue.component的第一個(gè)參數(shù)。自定義組件名 (字母全小寫且必須包含一個(gè)連字符)。

組件名大小寫

1. kebab-case (短橫線分隔命名) 定義一個(gè)組件時(shí)，你也必須在引用這個(gè)自定義元素時(shí)使用 kebab-case。

2.使用 PascalCase (駝峰式命名) 定義一個(gè)組件時(shí)，你在引用這個(gè)自定義元素時(shí)兩種命名法都可以使用。

全局注冊(cè)

Vue.component 來(lái)創(chuàng)建組件,是全局注冊(cè)的。

局部注冊(cè)

你可以通過(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ì)象。

Prop

Prop類型

每個(gè) prop 都有指定的值類型：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

傳遞靜態(tài)或動(dòng)態(tài) Prop

給 prop 傳入一個(gè)靜態(tài)的值：

<blog-post title="My journey with Vue"></blog-post>

通過(guò) v-bind 動(dòng)態(tài)賦值：

<!-- 動(dòng)態(tài)賦予一個(gè)變量的值 -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- 動(dòng)態(tài)賦予一個(gè)復(fù)雜表達(dá)式的值 -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>

傳入一個(gè)對(duì)象的所有屬性

post: {
  id: 1,
  title: 'My Journey with Vue'
}

<blog-post v-bind="post"></blog-post>

單向數(shù)據(jù)流

注意在 JavaScript 中對(duì)象和數(shù)組是通過(guò)引用傳入的，所以對(duì)于一個(gè)數(shù)組或?qū)ο箢愋偷?prop 來(lái)說(shuō)，在子組件中改變這個(gè)對(duì)象或數(shù)組本身將會(huì)影響到父組件的狀態(tài)。

Prop 驗(yàn)證

注意那些 prop 會(huì)在一個(gè)組件實(shí)例創(chuàng)建之前進(jìn)行驗(yàn)證，所以實(shí)例的屬性 (如 data、computed 等) 在 default 或 validator 函數(shù)中是不可用的。

類型檢查

type 可以是下列原生構(gòu)造函數(shù)中的一個(gè)：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

type 還可以是一個(gè)自定義的構(gòu)造函數(shù)，并且通過(guò)instanceof來(lái)進(jìn)行檢查確認(rèn)。例如，給定下列現(xiàn)成的構(gòu)造函數(shù)：

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

你可以使用：

Vue.component('blog-post', {
  props: {
    author: Person
  }
})

來(lái)驗(yàn)證 author prop 的值是否是通過(guò) new Person 創(chuàng)建的。

自定義事件

事件名

跟組件和 prop 不同，事件名不存在任何自動(dòng)化的大小寫轉(zhuǎn)換。而是觸發(fā)的事件名需要完全匹配監(jiān)聽(tīng)這個(gè)事件所用的名稱。

推薦你始終使用 kebab-case 的事件名。

將原生事件綁定到組件

Vue 提供了一個(gè)$listeners屬性，它是一個(gè)對(duì)象，里面包含了作用在這個(gè)組件上的所有監(jiān)聽(tīng)器。