#组件模版

组件模版指的是以.gen为后缀名的文件中由<template>标签包裹的用来描述页面结构的部分。

#基本语法

1<template>
2    <$component_name 
3        $($($static_prop="$prop_value")*)?
4        $($(:$bind_prop="$bind_ident")*)?
5        $($(@callback="$callback_ident($($arg),*)")*)?
6    >
7        // ...
8    </$component_name>
9</template>

• $component_name: 组件名称
• $static_prop: 静态属性
• $prop_value: 属性值
• $bind_prop: 绑定属性
• $bind_ident: 绑定变量标识符
• $callback: 回调
• $callback_ident: 回调方法标识符
• $arg: 参数
• $()*: many1，1个或多个
• $()?: recognize，0个或1个

#示例

1<template>
2    <view id="UiRoot">
3        <label text="'Hello GenUI!'"></label>
4        <view height="100.0" width="100.0" theme="Info"></view>
5    </view>
6</template>

#语法规则

在语法规则部分我们会详细讲述组件模版的编写规则

#根组件

根组件指的是每个.gen文件中组件模版部分的根组件，即<template>标签包裹的首个标签

1<template>
2    <view id="UiRoot"></view>
3</template>

在这个例子中根组件就是<view id="UiRoot"></view>

#唯一根原则

任何组件模版有且只有一个唯一的根组件，且根组件必须有一个唯一名称

1<view id="SpecialName"></view>

#命名引用原则

1. 该原则只对根组件生效，对根组件而已，唯一名称就是外部引用时的组件名，例如当唯一名称为Hello时，在其他组件中使用<Hello></Hello>表示该组件
2. 您也可以使用snake name rule进行根组件的命名，例如： my_view1，但在其他组件中引入时依然会转为camel name rule，即：<MyView1></MyView1>
3. 命名引用原则只对外部引用有效

#默认继承原则

对于根组件，默认继承view视图组件，不可更改，我们希望每个被封装的组件都可以作为独立的单个视图出现。

#内外原则

上方对于根组件id和name的说明我们称为对内原则和对外原则，id对内，name对外，意思是：

• id仅对当前被封装的组件内部起效，外部无法通过内部的id获取内部组件
• name仅对外有效，是外部使用被封装组件的途径，对内无法用name对组件进行获取，且name只存在于<component>中

#静态属性

静态属性的写法为：$static_prop="$prop_value"，多个属性由空格分割，例如：

1<view height="100.0" width="200.0"></view>

组件的属性值是有类型的，错误类型无法编译通过

#id

id是组件的唯一标识，每个组件都有这个属性，通过id可以获取到对应的组件，同时它也是组件的属性标识

1<label id="my_label"></label>

#class

class是组件的属性(样式)标识，通过class可以将样式(<style>)部分对于的样式合并到组件中

• class没有唯一性
• 一个组件可以有多个class，但不能声明多个class

1<label class="common_label" ></label>
2
3<label class="[common_label, bold_label, font_smaller]"></label>

#as_prop属性组件

as_prop属性会把某个组件转为其父组件的属性，源自于Makepad中构建插槽的一种方式

目前仅在button和view组件中涉及

#绑定属性

对于需要绑定的属性使用:作为属性的前缀，属性值为Bind::Ident类型，写法如下：

1<view id="my_view" :height="view_h"></view>

#回调

回调表示组件激发某个事件之后调用的某个方法，使用@作为回调前缀，写法如下：

1<button id="my_btn" @clicked="click_btn()"></button>