组件语法规范

组件开发

基础语法和卡片开发语法一致。

目前在组件内的 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>