<bdo id="8ae0w"></bdo>

<fieldset id="8ae0w"></fieldset>

 二、組件注冊語法糖

    以上組件注冊的方式有些繁瑣，Vue.js為了簡化這個過程，提供了注冊語法糖

// 全局注冊，my-component1是標(biāo)簽名稱
Vue.component('my-component1',{
 template: '
This is the first component!
'
})
var vm1 = new Vue({
 el: '#app1'
})

       Vue.component()的第1個參數(shù)是標(biāo)簽名稱，第2個參數(shù)是一個選項(xiàng)對象，使用選項(xiàng)對象的template屬性定義組件模板。
使用這種方式，Vue在背后會自動地調(diào)用Vue.extend()。

   components實(shí)現(xiàn)局部注冊

var vm2 = new Vue({
 el: '#app2',
 components: {
  // 局部注冊，my-component2是標(biāo)簽名稱
  'my-component2': {
   template: '
This is the second component!
'
  },
  // 局部注冊，my-component3是標(biāo)簽名稱
  'my-component3': {
   template: '
This is the third component!
'
  }
 }
}

三、父組件和子組件

 我們可以在組件中定義并使用其他組件，這就構(gòu)成了父子組件的關(guān)系。

 這段代碼的運(yùn)行結(jié)果如下

四、使用script或template標(biāo)簽

       盡管語法糖簡化了組件注冊，但在template選項(xiàng)中拼接HTML元素比較麻煩，這也導(dǎo)致了HTML和JavaScript的高耦合性。
慶幸的是，Vue.js提供了兩種方式將定義在JavaScript中的HTML模板分離出來。

 
 
 


 
  
  
 
 
  
這是template標(biāo)簽構(gòu)建的組件
 
 
 
 

 運(yùn)行結(jié)果：

注意：使用  {{ tab }}  

     這里v-bind:key其實(shí)可有可無，具體key介紹可以看官網(wǎng)。

     這里v-bind:class和v-on:click都是用來為了改變樣式用的。

    關(guān)鍵是component組件標(biāo)簽。

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

關(guān)于如何在vue中使用注冊組件問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。