vue.js實例對象+組件樹的示例分析

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

vue的實例對象

首先用js的new關鍵字實例化一個vue

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

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

**data:** 數據通過data引入到組件中

在組件中的data要以函數的形式返回數據，當不同的界面用了同一個組件時，才不會以為一個組件的值發生改變而改變其他頁面的內容。

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

組件注冊語法糖

全局組件

A方法：

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

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

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

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

B方法（與A方法一樣，只是交簡單的寫法）：

沒有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: { …… }
}
})
```

子組件

創建方法和上面兩種方法類似，不同的是位置是放在組件內部。

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

內置組件

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

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

關于“vue.js實例對象+組件樹的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。