模版标签

`template`

声明在 SFC 顶层表示为 AIP SFC 文件，可选择加上 aip 属性手动标明
模版内的 template 作为 AIP 的普通标签处理

自定义组件标签

需要先在脚本中引用并定义组件，声明的组件名称必须为 Pascal 形式
- 如希望使用 TextInput 组件，必须在 components 中引入 TextInput 组件
- 全局组件可直接在 SFC 内使用，使用方式参考参考此处
组件在模版中的使用方式仅支持 kebab 形式
- 如希望使用 TextInput 组件，必须在模版中声明为 <text-input/>
不支持在自定义组件节点内包含其他节点，仅支持子包含形式
组件间通过传递属性通信，属性都会放置在 state 中
- 属性名仅支持字符串，不支持 AIP 的绑定、事件等特殊指令
- 属性值仅支持字符串，会放置在子组件的 state 中，支持在子组件中修改 props
- 由于 SFC 内不感知运行时的执行上下文，所以属性传递仅支持字符串，不能用于变量值传递
- 如需在子组件中使用当前 state，直接在子组件中引用即可
  - 例如父组件内有 state 变量 a，直接在子组件内使用this.a即可取到值
  - 无需通过props="a"的方式传递，此种方式只会在子组件内 state 创建一个名为 props 的变量，值为'a'
实现时会将自定义组件合并，最终仅会输出一个 AIP 模版结果

使用方式

例如下方entry.aip内使用了text-input.aip组件

<!-- entry.aip -->
<template>
    <div>
        <!-- 使用组件，传入 props，键和值均为字符串，不支持值传递 -->
        <text-input required="true" />
    </div>
</template>
<script>
    // 手动引入自定义组件
    import TextInput from './text-input.aip';

    export default {
        components: { TextInput },
        state: {
            inputValue: 'value',
        },
    };
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!-- text-input.aip -->
<template>
    <aip-input [required]="required" [(value)]="inputValue" />
</template>
<script>
    export default {
        state: {
            // 默认值
            required: false,
            inputValue: '',
        },
    };
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

使用 SDK 生成的标准 AIP 页面产物结果如下：

<!-- 编译结果 -->
<div aip-state="(() => {return { inputValue: 'value' };})()">
    <aip-input
        aip-state="(() => {return { required: 'true', inputValue: '' };})()"
        [required]="required"
        [(value)]="inputValue"
    ></aip-input>
</div>

1
2
3
4
5
6
7
8

全局自定义组件注入

SFC 支持从外部引入全局组件，可以无需手动引入。但需要在 SFC 的入口函数中定义组件内容，产物会直接平铺在内部使用的地方。

例如：

transformSFC(entryAIPFile, {
    target: 'template',
    globalComponents: {
        DynamicComponent: {
            rawContent: `
                <template>
                    <div>dynamic component
                        <nested-dynamic-components />
                    </div>
                </template>
                <script>
                    export default {
                        state: { inputValue: 'value' }
                    }
                </script>
            `,
        },
        NestedDynamicComponents: {
            rawContent: `
                <template>
                    <div class="classInA">dynamic component2</div>
                </template>
                <style scoped>
                    @import './a.css';
                </style>
            `,
        },
    },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

通过上述方式引入 DynamicComponent 和 NestedDynamicComponents两个全局组件，其中DynamicComponent 中包裹了NestedDynamicComponents组件。则在 SFC 中可以直接使用这两个组件而无需在script中import。

<!-- entry.aip -->
<template>
    <dynamic-components />
</template>
<script></script>

1
2
3
4
5

使用 SDK 生成的标准 AIP 页面产物结果如下：

<!-- 编译结果 -->
<div aip-state="(() => {return { inputValue: 'value' };})()">
    dynamic component
    <div class="classInA">dynamic component2</div>
</div>

1
2
3
4
5

# 模版标签

# template

# 自定义组件标签

# 使用方式

# 全局自定义组件注入

模版标签

`template`

自定义组件标签

使用方式

全局自定义组件注入