掌握 mPaaS 組件生命週期和文法 - 移動開發平台 mPaaS

組件開發

基礎文法和卡片開發文法一致。

目前在組件內的 JS 代碼中如果使用了 requireModule('animation')，需確認組件的調用者是否也使用了這個 JS 內建模組。如果均使用該 JS 內建模組，動畫則會被覆蓋。

說明

該問題將在引擎後續版本中進行修複。

屬性聲明（props）

組件可以通過 props 聲明外部可修改屬性，如果沒有通過 props 聲明的屬性外部不可改變。

props: {
  author: {    
    default: function () {
      return { name: 'name' }  // 預設值為 json，key 為 name value 為 ‘name’
    }
},

props: {
  author: {    
	    default: "name" // 預設值為 string ‘name’
  }
},

props: {
	author: {}  // 預設值為 undefined
}

props: [ 'name', 'title' ]; // name 和 title 均為 undefined.

重要

props 僅有上述四種寫法，其他寫法均不支援。
如果 props 寫法錯誤，則卡片不能為組件傳輸資料。在卡片裡的元件節點上的屬性不生效。
在卡片裡的元件節點上的屬性如未在組件 props 中聲明，則該屬性無效。
卡片中的資料包括外部傳入（卡片內元件節點上的屬性）、props 定義的預設值和 data 段內資料三個部分。其優先順序為 data > 外部傳入 > props 預設值，這三部分資料最後會合并到一起。相同欄位會被覆蓋。

生命週期

組件的生命週期只存在四個：

beforeCreate：表示組件在建立之前所執行的生命週期。
onCreated：表示組件建立完成。僅 JS 部分在建立完成，並未渲染到螢幕上。
onUpdated：當 props 有更新，並且更新後，會通過該生命週期通知群組件。參數為變更的欄位及其 value。
onDestroyed：當組件銷毀之前會調用該生命週期。組件如果有資源需要釋放，則需實現該生命週期介面。

重要

onCreated：和卡片的 onCreated 生命週期一致。調用順序為：子組件的 onCreated > 父組件的 onCreated > 卡片的 onCreated（如果有組件嵌套）。
destroy：通過 VIF VFOR 邏輯觸發的元件節點的銷毀，會直接調用該生命週期。如果卡片釋放導致的組件銷毀，其調用順序為：子組件的 onDestroyed > 父組件的 onDestroyed > 卡片的 onDestroyed（如果有組件嵌套）。

組件使用

寫法

以上述 Button 為例。

<Button :title="title" @buttonClicked="onButtonClicked"><Button>

說明

元件節點上只允許綁定 vif、vfor、props 以及 event。

組件通知卡片（子組件通知父組件）

組件內部調用卡片通過 emit 的方式來調用。例如組件內通過 buttonClicked（需要組件定義）方法回調給外來事件，則組件調用方式如下：
```
this.$emit("buttonClicked", {"title":"測試"});
```

外部監聽事件回調方法如下：

<Button :title="title" @buttonClicked="onButtonClicked"><Button>

資料更新（外部更新群組件）

需要組件聲明外部可以更新的屬性。

props:{
  //按鈕文案
  title:{
    default: "預設"
  } 
}

外部更新群組件屬性。

<Button v-if="showComponent" :title="buttonTitle" borderRadius="20px" :buttonColor="buttonColor" @buttonClicked="componentButtonClick()"></Button>