vue.js實(shí)例對象+組件樹(shù)的示例分析

這篇文章將為大家詳細講解有關(guān)vue.js實(shí)例對象+組件樹(shù)的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

vue的實(shí)例對象

首先用js的new關(guān)鍵字實(shí)例化一個(gè)vue

el: vue組件或對象裝載在頁(yè)面的位置，可通過(guò)id或class或標簽名

template: 裝載的內容。HTML代碼/包含指令或者其他組件的HTML片段，template將是我們使用的模板

**data:** 數據通過(guò)data引入到組件中

在組件中的data要以函數的形式返回數據，當不同的界面用了同一個(gè)組件時(shí)，才不會(huì )以為一個(gè)組件的值發(fā)生改變而改變其他頁(yè)面的內容。

{{ }} 雙括號語(yǔ)法里面放入數據的變量

組件注冊語(yǔ)法糖

全局組件

A方法：

調用Vue.extend()方法創(chuàng )建組件構造器

調用Vue.component(組件標簽,組件構造器)方法注冊組件

在Vue實(shí)例的作用范圍內才能夠使用組件

/*A方法全局組件1:*/
//1.Vue.extend() 創(chuàng  )建組件構造器
var mycomponent = Vue.extend({
 /*組件內容*/
 template:…… ,
 data: ……
})
//2.Vue.component注冊組件
Vue.component('my-component1', mycomponent);

B方法（與A方法一樣，只是交簡(jiǎn)單的寫(xiě)法）：

沒(méi)有A方法中的第1步，直接調用Vue.component(標簽名，選項對象)方法

/*B方法 全局組件2:*/
Vue.component('my-component2', {
  /*組件內容*/
 template:…… ,
 data: ……
}
/*在html中的組件調用，把組件標簽直接用在html中相應的位置即可*/
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>

局部組件 使用components屬性

```javascript
var partcomponent2 = {
el:…… ,
data: { …… }
}
new Vue({
el: '#app',
data: {
……
},
components: {
/* A方法： 局部組件1 /
'part-component1': partcomponent1
}，
/B方法 局部組件2 */
'part-component2':{
el:…… ,
data: { …… }
}
})
```

子組件

創(chuàng )建方法和上面兩種方法類(lèi)似，不同的是位置是放在組件內部。

var compentChild ={
  el:……,
  data:……
}
component: {
  el: ……,
  data: {……}
  components: {
   'component-child': componentChild
  }
}

內置組件

不需要在components里面聲明組件。而是直接用標簽。例如在如下的myHeader中使用內置組件,root-view、keep-alived等也是vue本身提供的一個(gè)內置組件。

 var myHeader = {
   template: '<component></component> <root-view></rooot-view>'
 }