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>'
 }</root-view>

相關推薦：

vue.js中父元件呼叫子元件的內部方法分享

##Vue.js元件通訊實例分享

初識Vue.js 中的*.Vue檔_vue.js#

以上是vue.js實例物件和組件樹實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！