超緊繃!30天Vue.js學習日記 組件在蓋,基礎手法要有!

大家好,挖喜Ian啦!今天要來介紹的是在vue中很重要的一環-組件(Component)
通常我們在寫vue時,會從根實例開始,在從根開始把元件一個一個搭建上去,
就好像是有了地基,再把磚塊一個一個蓋上去的感覺,根本就是在蓋房子嘛!

組件在蓋,基礎手法要有,我們從組件的命名方式開始學起:

• kebab-case

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

當我們是用kebab-case方式命名時,我們在引用自訂義元素也必須使用kebab-case。(e.g. my-component-name )

• PascalCase

Vue.component('MyComponentName', { /* ... */ })

當我們使用PascalCase去命名時,我們可以用任意一種方式去引用自訂義元素,意即不管my-component-name或是 MyComponentName都行,Vue官網在這邊也很貼心的提醒我們當我們直接在DOM中使用,只有第一種是有效的,為什麼呢?因為在html解析標籤時,是不分大小寫的,所以不管你怎麼寫,生成的標籤名都會是小寫!!!

說這麼多,那要如何使用組件呢?我們會從註冊組件開始:
在vue中,組件註冊有兩種方式。
不過我們要先來了解Vue的組件構造器Vue.extend,他就是預設了部分選項的實例構造器,主要用來服務組件,語法如下:

Vue.extend({//options…})

在了解它之後,我們還必須學會註冊它:

• 全局註冊

Vue.component('my-component-name', {
  // ... options ...
  // my-component-name為該組件的id
})

從範例可以看出,我們會使用Vue.component去做組件的全局註冊,當它們註冊之後,就可以用在我們創建的根實例(對的,全局註冊需要在我們創建根實例之前做。)
在這邊大家可能會一頭霧水,表示:那你告訴我Vue.extend的意義在哪???
別急,其實當我們使用Vue.component時,其實是長這樣:

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

Vue會自動幫我們判斷我們到底是用第一種方式還是第二種去做全局註冊,若為前者,貼心的Vue會自動幫我們調用Vue.extend喔~

• 局部註冊

<script> 
// 1.創建組件構造器 
var myComponent = Vue.extend({ 
template: '<div>This is my first component!</div>' }) 
new Vue({ 
el: '#app', 
components: { // 2. 將myComponent組件註冊到Vue實例下 
'my-component' : myComponent 
} 
}); 
</script>

今天的介紹到這邊結束,這幾天我們會繼續對組件做介紹,當然,也有可能穿插著其他東西講,但大致都會以組件為重點...直到中場休息篇為止